@pandacss/generator 0.9.0 → 0.11.0

package/dist/index.mjs

@@ -99,7 +99,7 @@ var getMessages = (ctx) => ({
 
 // src/artifacts/index.ts
 import { isObject } from "@pandacss/shared";
-import outdent42 from "outdent";
+import outdent43 from "outdent";
 
 // src/artifacts/css/global-css.ts
 var generateGlobalCss = (ctx) => {
@@ -388,7 +388,10 @@ var generateStaticCss = (ctx) => {
         return [];
       return Object.keys(values);
     },
-    getRecipeKeys: (recipe) => recipes.details.find((detail) => detail.baseName === recipe)?.variantKeyMap ?? {}
+    getRecipeKeys: (recipe) => {
+      const recipeConfig = recipes.details.find((detail) => detail.baseName === recipe);
+      return Object.assign({ __base: recipeConfig?.config.base }, recipeConfig?.variantKeyMap ?? {});
+    }
   });
   results.css.forEach((css2) => {
     sheet.processAtomic(css2);
@@ -487,14 +490,15 @@ function generateConditions(ctx) {
     js: outdent2`
     ${ctx.file.import("withoutSpace", "../helpers")}
 
-    const conditions = new Set([${keys.map((key) => JSON.stringify(key))}])
+    const conditionsStr = "${keys.join(",")}"
+    const conditions = new Set(conditionsStr.split(','))
 
     export function isCondition(value){
       return conditions.has(value) || /^@|&|&$/.test(value)
     }
 
     const underscoreRegex = /^_/
-    const selectorRegex = /&|@/
+    const conditionsSelectorRegex = /&|@/
 
     export function finalizeConditions(paths){
       return paths.map((path) => {
@@ -502,7 +506,7 @@ function generateConditions(ctx) {
           return path.replace(underscoreRegex, '')
         }
 
-        if (selectorRegex.test(path)){
+        if (conditionsSelectorRegex.test(path)){
           return \`[\${withoutSpace(path.trim())}]\`
         }
 
@@ -582,14 +586,13 @@ function generateStringLiteralConditions(ctx) {
 
 // src/artifacts/js/css-fn.ts
 import { outdent as outdent4 } from "outdent";
-var stringify = (v) => JSON.stringify(Object.fromEntries(v), null, 2);
 function generateCssFn(ctx) {
   const {
     utility,
     config: { hash, prefix },
     conditions
   } = ctx;
-  const { separator } = utility;
+  const { separator, getPropShorthands } = utility;
   return {
     dts: outdent4`
     import type { SystemStyleObject } from '../types'
@@ -605,35 +608,59 @@ function generateCssFn(ctx) {
     ${ctx.file.import("createCss, createMergeCss, hypenateProperty, withoutSpace", "../helpers")}
     ${ctx.file.import("sortConditions, finalizeConditions", "./conditions")}
 
-    const classNameMap = ${stringify(utility.entries())}
-
-    const shorthands = ${stringify(utility.shorthands)}
-
-    const breakpointKeys = ${JSON.stringify(conditions.breakpoints.keys)}
-
-    const hasShorthand = ${utility.hasShorthand ? "true" : "false"}
-
-    const resolveShorthand = (prop) => shorthands[prop] || prop
+    const utilities = "${utility.entries().map(([prop, className]) => {
+      const shorthandList = getPropShorthands(prop);
+      const result = [
+        prop,
+        [
+          className,
+          shorthandList.length ? (
+            // mark shorthand equal to className as 1 to save a few bytes
+            shorthandList.map((shorthand) => shorthand === className ? 1 : shorthand).join("/")
+          ) : null
+        ].filter(Boolean).join("/")
+      ].join(":");
+      return result;
+    }).join(",")}"
+
+    const classNames = new Map()
+    ${utility.hasShorthand ? outdent4`
+    const shorthands = new Map()
+    utilities.split(',').forEach((utility) => {
+      const [prop, meta] = utility.split(':')
+      const [className, ...shorthandList] = meta.split('/')
+      classNames.set(prop, className)
+      if (shorthandList.length) {
+        shorthandList.forEach((shorthand) => {
+          shorthands.set(shorthand === '1' ? className : shorthand, prop)
+        })
+      }
+    })
 
-    function transform(prop, value) {
-      const key = resolveShorthand(prop)
-      const propKey = classNameMap[key] || hypenateProperty(key)
-      const className = \`$\{propKey}${separator}$\{withoutSpace(value)}\`
-      return { className }
-    }
+    const resolveShorthand = (prop) => shorthands.get(prop) || prop
+    ` : outdent4`
+    utilities.split(',').forEach((utility) => {
+      const [prop, className] = utility.split(':')
+      classNames.set(prop, className)
+    })
+    `}
 
     const context = {
-      hash: ${hash ? "true" : "false"},
+      ${hash ? "hash: true," : ""}
       conditions: {
         shift: sortConditions,
         finalize: finalizeConditions,
-        breakpoints: { keys: breakpointKeys }
+        breakpoints: { keys: ${JSON.stringify(conditions.breakpoints.keys)} }
       },
       utility: {
-        prefix: ${prefix ? JSON.stringify(prefix) : void 0},
-        transform,
-        hasShorthand,
-        resolveShorthand,
+        ${prefix ? "prefix: " + JSON.stringify(prefix) + "," : ""}
+        transform: ${utility.hasShorthand ? `(prop, value) => {
+              const key = resolveShorthand(prop)
+              const propKey = classNames.get(key) || hypenateProperty(key)
+              return { className: \`\${propKey}${separator}\${withoutSpace(value)}\` }
+            }` : `(key, value) => ({ className: \`\${classNames.get(key) || hypenateProperty(key)}${separator}\${withoutSpace(value)}\` })`},
+        ${utility.hasShorthand ? "hasShorthand: true," : ""}
+        resolveShorthand: ${utility.hasShorthand ? "resolveShorthand" : "prop => prop"},
       }
     }
 
@@ -808,20 +835,33 @@ import { outdent as outdent8 } from "outdent";
 
 // src/artifacts/generated/helpers.mjs.json
 var helpers_mjs_default = {
-  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/astish.ts\nvar newRule = /(?:([\\u0080-\\uFFFF\\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\\s*)/g;\nvar ruleClean = /\\/\\*[^]*?\\*\\/|\\s\\s+|\\n/g;\nvar astish = (val, tree = [{}]) => {\n  const block = newRule.exec((val ?? "").replace(ruleClean, ""));\n  if (!block)\n    return tree[0];\n  if (block[4])\n    tree.shift();\n  else if (block[3])\n    tree.unshift(tree[0][block[3]] = tree[0][block[3]] || {});\n  else\n    tree[0][block[1]] = block[2];\n  return astish(val, tree);\n};\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?$/;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const result = {};\n  for (const source of sources) {\n    for (const [key, value] of Object.entries(source)) {\n      if (isObject(value)) {\n        result[key] = mergeProps(result[key] || {}, value);\n      } else {\n        result[key] = value;\n      }\n    }\n  }\n  return result;\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeShorthand(styles, context) {\n  const { hasShorthand, resolveShorthand } = context.utility;\n  return walkObject(styles, (v) => v, {\n    getKey: (prop) => {\n      return hasShorthand ? resolveShorthand(prop) : prop;\n    }\n  });\n}\nfunction normalizeStyleObject(styles, context) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: (prop) => {\n        return hasShorthand ? resolveShorthand(prop) : prop;\n      }\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return (styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  };\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeShorthand(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss, assignCss };\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/normalize-html.ts\nvar htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"];\nfunction convert(key) {\n  return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key;\n}\nfunction normalizeHTMLProps(props) {\n  return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));\n}\nnormalizeHTMLProps.keys = htmlProps;\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\nexport {\n  astish,\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  mergeProps,\n  normalizeHTMLProps,\n  splitProps,\n  toHash,\n  walkObject,\n  withoutSpace\n};\n'
+  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/css-important.ts\nvar importantRegex = /!(important)?$/;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const result = {};\n  for (const source of sources) {\n    for (const [key, value] of Object.entries(source)) {\n      if (isObject(value)) {\n        result[key] = mergeProps(result[key] || {}, value);\n      } else {\n        result[key] = value;\n      }\n    }\n  }\n  return result;\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeShorthand(styles, context) {\n  const { hasShorthand, resolveShorthand } = context.utility;\n  return walkObject(styles, (v) => v, {\n    getKey: (prop) => {\n      return hasShorthand ? resolveShorthand(prop) : prop;\n    }\n  });\n}\nfunction normalizeStyleObject(styles, context) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: (prop) => {\n        return hasShorthand ? resolveShorthand(prop) : prop;\n      }\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return (styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  };\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeShorthand(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss, assignCss };\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/slot.ts\nvar assign = (obj, path, value) => {\n  const last = path.pop();\n  const target = path.reduce((acc, key) => {\n    if (acc[key] == null)\n      acc[key] = {};\n    return acc[key];\n  }, obj);\n  if (last != null)\n    target[last] = value;\n};\nvar getSlotRecipes = (recipe) => {\n  const parts = recipe.slots.map((slot) => [\n    slot,\n    // setup base recipe\n    {\n      // create class-base on BEM\n      className: [recipe.className ?? "", slot].join("__"),\n      base: {},\n      variants: {},\n      defaultVariants: recipe.defaultVariants ?? {},\n      compoundVariants: []\n    }\n  ]).map(([slot, cva]) => {\n    const base = recipe.base[slot];\n    if (base)\n      cva.base = base;\n    walkObject(\n      recipe.variants ?? {},\n      (variant, path) => {\n        if (!variant[slot])\n          return;\n        assign(cva, ["variants", ...path], variant[slot]);\n      },\n      {\n        stop: (_value, path) => path.includes(slot)\n      }\n    );\n    if (recipe.compoundVariants) {\n      cva.compoundVariants = getSlotCompoundVariant(recipe.compoundVariants, slot);\n    }\n    return [slot, cva];\n  });\n  return Object.fromEntries(parts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\nexport {\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  getSlotCompoundVariant,\n  getSlotRecipes,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  memo,\n  mergeProps,\n  splitProps,\n  toHash,\n  walkObject,\n  withoutSpace\n};\n'
+};
+
+// src/artifacts/generated/astish.mjs.json
+var astish_mjs_default = {
+  content: '// src/astish.ts\nvar newRule = /(?:([\\u0080-\\uFFFF\\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\\s*)/g;\nvar ruleClean = /\\/\\*[^]*?\\*\\/|\\s\\s+|\\n/g;\nvar astish = (val, tree = [{}]) => {\n  const block = newRule.exec((val ?? "").replace(ruleClean, ""));\n  if (!block)\n    return tree[0];\n  if (block[4])\n    tree.shift();\n  else if (block[3])\n    tree.unshift(tree[0][block[3]] = tree[0][block[3]] || {});\n  else\n    tree[0][block[1]] = block[2];\n  return astish(val, tree);\n};\nexport {\n  astish\n};\n'
+};
+
+// src/artifacts/generated/normalize-html.mjs.json
+var normalize_html_mjs_default = {
+  content: '// src/normalize-html.ts\nvar htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"];\nfunction convert(key) {\n  return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key;\n}\nfunction normalizeHTMLProps(props) {\n  return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));\n}\nnormalizeHTMLProps.keys = htmlProps;\nexport {\n  normalizeHTMLProps\n};\n'
 };
 
 // src/artifacts/js/helpers.ts
-function generateHelpers() {
+function generateHelpers(ctx) {
   return {
     js: outdent8`
   ${helpers_mjs_default.content}
+  ${ctx.isTemplateLiteralSyntax ? astish_mjs_default.content : ""}
+
+  ${ctx.jsx.framework ? `${normalize_html_mjs_default.content}` : ""}
 
-  export function __spreadValues(a, b){
+  export function __spreadValues(a, b) {
     return { ...a, ...b }
   }
 
-  export function __objRest(source, exclude){
+  export function __objRest(source, exclude) {
     return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key)))
   }
   `
@@ -830,19 +870,29 @@ function generateHelpers() {
 
 // src/artifacts/generated/is-valid-prop.mjs.json
 var is_valid_prop_mjs_default = {
-  content: '// src/index.ts\nvar userGenerated = [];\nvar allCssProperties = [\n  "MsAccelerator",\n  "MsBlockProgression",\n  "MsContentZoomChaining",\n  "MsContentZooming",\n  "MsContentZoomLimit",\n  "MsContentZoomLimitMax",\n  "MsContentZoomLimitMin",\n  "MsContentZoomSnap",\n  "MsContentZoomSnapPoints",\n  "MsContentZoomSnapType",\n  "MsFilter",\n  "MsFlowFrom",\n  "MsFlowInto",\n  "MsGridColumns",\n  "MsGridRows",\n  "MsHighContrastAdjust",\n  "MsHyphenateLimitChars",\n  "MsHyphenateLimitLines",\n  "MsHyphenateLimitZone",\n  "MsImeAlign",\n  "MsOverflowStyle",\n  "MsScrollbar3dlightColor",\n  "MsScrollbarArrowColor",\n  "MsScrollbarBaseColor",\n  "MsScrollbarDarkshadowColor",\n  "MsScrollbarFaceColor",\n  "MsScrollbarHighlightColor",\n  "MsScrollbarShadowColor",\n  "MsScrollbarTrackColor",\n  "MsScrollChaining",\n  "MsScrollLimit",\n  "MsScrollLimitXMax",\n  "MsScrollLimitXMin",\n  "MsScrollLimitYMax",\n  "MsScrollLimitYMin",\n  "MsScrollRails",\n  "MsScrollSnapPointsX",\n  "MsScrollSnapPointsY",\n  "MsScrollSnapType",\n  "MsScrollSnapX",\n  "MsScrollSnapY",\n  "MsScrollTranslation",\n  "MsTextAutospace",\n  "MsTouchSelect",\n  "MsUserSelect",\n  "MsWrapFlow",\n  "MsWrapMargin",\n  "MsWrapThrough",\n  "MozAppearance",\n  "MozBinding",\n  "MozBorderBottomColors",\n  "MozBorderLeftColors",\n  "MozBorderRightColors",\n  "MozBorderTopColors",\n  "MozContextProperties",\n  "MozFloatEdge",\n  "MozForceBrokenImageIcon",\n  "MozImageRegion",\n  "MozOrient",\n  "MozOutlineRadius",\n  "MozOutlineRadiusBottomleft",\n  "MozOutlineRadiusBottomright",\n  "MozOutlineRadiusTopleft",\n  "MozOutlineRadiusTopright",\n  "MozStackSizing",\n  "MozTextBlink",\n  "MozUserFocus",\n  "MozUserInput",\n  "MozUserModify",\n  "MozWindowDragging",\n  "MozWindowShadow",\n  "WebkitAppearance",\n  "WebkitBorderBefore",\n  "WebkitBorderBeforeColor",\n  "WebkitBorderBeforeStyle",\n  "WebkitBorderBeforeWidth",\n  "WebkitBoxReflect",\n  "WebkitLineClamp",\n  "WebkitMask",\n  "WebkitMaskAttachment",\n  "WebkitMaskClip",\n  "WebkitMaskComposite",\n  "WebkitMaskImage",\n  "WebkitMaskOrigin",\n  "WebkitMaskPosition",\n  "WebkitMaskPositionX",\n  "WebkitMaskPositionY",\n  "WebkitMaskRepeat",\n  "WebkitMaskRepeatX",\n  "WebkitMaskRepeatY",\n  "WebkitMaskSize",\n  "WebkitOverflowScrolling",\n  "WebkitTapHighlightColor",\n  "WebkitTextFillColor",\n  "WebkitTextStroke",\n  "WebkitTextStrokeColor",\n  "WebkitTextStrokeWidth",\n  "WebkitTouchCallout",\n  "WebkitUserModify",\n  "accentColor",\n  "alignContent",\n  "alignItems",\n  "alignSelf",\n  "alignTracks",\n  "all",\n  "animation",\n  "animationComposition",\n  "animationDelay",\n  "animationDirection",\n  "animationDuration",\n  "animationFillMode",\n  "animationIterationCount",\n  "animationName",\n  "animationPlayState",\n  "animationTimingFunction",\n  "animationTimeline",\n  "appearance",\n  "aspectRatio",\n  "azimuth",\n  "backdropFilter",\n  "backfaceVisibility",\n  "background",\n  "backgroundAttachment",\n  "backgroundBlendMode",\n  "backgroundClip",\n  "backgroundColor",\n  "backgroundImage",\n  "backgroundOrigin",\n  "backgroundPosition",\n  "backgroundPositionX",\n  "backgroundPositionY",\n  "backgroundRepeat",\n  "backgroundSize",\n  "blockOverflow",\n  "blockSize",\n  "border",\n  "borderBlock",\n  "borderBlockColor",\n  "borderBlockStyle",\n  "borderBlockWidth",\n  "borderBlockEnd",\n  "borderBlockEndColor",\n  "borderBlockEndStyle",\n  "borderBlockEndWidth",\n  "borderBlockStart",\n  "borderBlockStartColor",\n  "borderBlockStartStyle",\n  "borderBlockStartWidth",\n  "borderBottom",\n  "borderBottomColor",\n  "borderBottomLeftRadius",\n  "borderBottomRightRadius",\n  "borderBottomStyle",\n  "borderBottomWidth",\n  "borderCollapse",\n  "borderColor",\n  "borderEndEndRadius",\n  "borderEndStartRadius",\n  "borderImage",\n  "borderImageOutset",\n  "borderImageRepeat",\n  "borderImageSlice",\n  "borderImageSource",\n  "borderImageWidth",\n  "borderInline",\n  "borderInlineEnd",\n  "borderInlineColor",\n  "borderInlineStyle",\n  "borderInlineWidth",\n  "borderInlineEndColor",\n  "borderInlineEndStyle",\n  "borderInlineEndWidth",\n  "borderInlineStart",\n  "borderInlineStartColor",\n  "borderInlineStartStyle",\n  "borderInlineStartWidth",\n  "borderLeft",\n  "borderLeftColor",\n  "borderLeftStyle",\n  "borderLeftWidth",\n  "borderRadius",\n  "borderRight",\n  "borderRightColor",\n  "borderRightStyle",\n  "borderRightWidth",\n  "borderSpacing",\n  "borderStartEndRadius",\n  "borderStartStartRadius",\n  "borderStyle",\n  "borderTop",\n  "borderTopColor",\n  "borderTopLeftRadius",\n  "borderTopRightRadius",\n  "borderTopStyle",\n  "borderTopWidth",\n  "borderWidth",\n  "bottom",\n  "boxAlign",\n  "boxDecorationBreak",\n  "boxDirection",\n  "boxFlex",\n  "boxFlexGroup",\n  "boxLines",\n  "boxOrdinalGroup",\n  "boxOrient",\n  "boxPack",\n  "boxShadow",\n  "boxSizing",\n  "breakAfter",\n  "breakBefore",\n  "breakInside",\n  "captionSide",\n  "caret",\n  "caretColor",\n  "caretShape",\n  "clear",\n  "clip",\n  "clipPath",\n  "color",\n  "colorScheme",\n  "columnCount",\n  "columnFill",\n  "columnGap",\n  "columnRule",\n  "columnRuleColor",\n  "columnRuleStyle",\n  "columnRuleWidth",\n  "columnSpan",\n  "columnWidth",\n  "columns",\n  "contain",\n  "containIntrinsicSize",\n  "containIntrinsicBlockSize",\n  "containIntrinsicHeight",\n  "containIntrinsicInlineSize",\n  "containIntrinsicWidth",\n  "container",\n  "containerName",\n  "containerType",\n  "content",\n  "contentVisibility",\n  "counterIncrement",\n  "counterReset",\n  "counterSet",\n  "cursor",\n  "direction",\n  "display",\n  "emptyCells",\n  "filter",\n  "flex",\n  "flexBasis",\n  "flexDirection",\n  "flexFlow",\n  "flexGrow",\n  "flexShrink",\n  "flexWrap",\n  "float",\n  "font",\n  "fontFamily",\n  "fontFeatureSettings",\n  "fontKerning",\n  "fontLanguageOverride",\n  "fontOpticalSizing",\n  "fontPalette",\n  "fontVariationSettings",\n  "fontSize",\n  "fontSizeAdjust",\n  "fontSmooth",\n  "fontStretch",\n  "fontStyle",\n  "fontSynthesis",\n  "fontVariant",\n  "fontVariantAlternates",\n  "fontVariantCaps",\n  "fontVariantEastAsian",\n  "fontVariantEmoji",\n  "fontVariantLigatures",\n  "fontVariantNumeric",\n  "fontVariantPosition",\n  "fontWeight",\n  "forcedColorAdjust",\n  "gap",\n  "grid",\n  "gridArea",\n  "gridAutoColumns",\n  "gridAutoFlow",\n  "gridAutoRows",\n  "gridColumn",\n  "gridColumnEnd",\n  "gridColumnGap",\n  "gridColumnStart",\n  "gridGap",\n  "gridRow",\n  "gridRowEnd",\n  "gridRowGap",\n  "gridRowStart",\n  "gridTemplate",\n  "gridTemplateAreas",\n  "gridTemplateColumns",\n  "gridTemplateRows",\n  "hangingPunctuation",\n  "height",\n  "hyphenateCharacter",\n  "hyphenateLimitChars",\n  "hyphens",\n  "imageOrientation",\n  "imageRendering",\n  "imageResolution",\n  "imeMode",\n  "initialLetter",\n  "initialLetterAlign",\n  "inlineSize",\n  "inputSecurity",\n  "inset",\n  "insetBlock",\n  "insetBlockEnd",\n  "insetBlockStart",\n  "insetInline",\n  "insetInlineEnd",\n  "insetInlineStart",\n  "isolation",\n  "justifyContent",\n  "justifyItems",\n  "justifySelf",\n  "justifyTracks",\n  "left",\n  "letterSpacing",\n  "lineBreak",\n  "lineClamp",\n  "lineHeight",\n  "lineHeightStep",\n  "listStyle",\n  "listStyleImage",\n  "listStylePosition",\n  "listStyleType",\n  "margin",\n  "marginBlock",\n  "marginBlockEnd",\n  "marginBlockStart",\n  "marginBottom",\n  "marginInline",\n  "marginInlineEnd",\n  "marginInlineStart",\n  "marginLeft",\n  "marginRight",\n  "marginTop",\n  "marginTrim",\n  "mask",\n  "maskBorder",\n  "maskBorderMode",\n  "maskBorderOutset",\n  "maskBorderRepeat",\n  "maskBorderSlice",\n  "maskBorderSource",\n  "maskBorderWidth",\n  "maskClip",\n  "maskComposite",\n  "maskImage",\n  "maskMode",\n  "maskOrigin",\n  "maskPosition",\n  "maskRepeat",\n  "maskSize",\n  "maskType",\n  "masonryAutoFlow",\n  "mathDepth",\n  "mathShift",\n  "mathStyle",\n  "maxBlockSize",\n  "maxHeight",\n  "maxInlineSize",\n  "maxLines",\n  "maxWidth",\n  "minBlockSize",\n  "minHeight",\n  "minInlineSize",\n  "minWidth",\n  "mixBlendMode",\n  "objectFit",\n  "objectPosition",\n  "offset",\n  "offsetAnchor",\n  "offsetDistance",\n  "offsetPath",\n  "offsetPosition",\n  "offsetRotate",\n  "opacity",\n  "order",\n  "orphans",\n  "outline",\n  "outlineColor",\n  "outlineOffset",\n  "outlineStyle",\n  "outlineWidth",\n  "overflow",\n  "overflowAnchor",\n  "overflowBlock",\n  "overflowClipBox",\n  "overflowClipMargin",\n  "overflowInline",\n  "overflowWrap",\n  "overflowX",\n  "overflowY",\n  "overscrollBehavior",\n  "overscrollBehaviorBlock",\n  "overscrollBehaviorInline",\n  "overscrollBehaviorX",\n  "overscrollBehaviorY",\n  "padding",\n  "paddingBlock",\n  "paddingBlockEnd",\n  "paddingBlockStart",\n  "paddingBottom",\n  "paddingInline",\n  "paddingInlineEnd",\n  "paddingInlineStart",\n  "paddingLeft",\n  "paddingRight",\n  "paddingTop",\n  "page",\n  "pageBreakAfter",\n  "pageBreakBefore",\n  "pageBreakInside",\n  "paintOrder",\n  "perspective",\n  "perspectiveOrigin",\n  "placeContent",\n  "placeItems",\n  "placeSelf",\n  "pointerEvents",\n  "position",\n  "printColorAdjust",\n  "quotes",\n  "resize",\n  "right",\n  "rotate",\n  "rowGap",\n  "rubyAlign",\n  "rubyMerge",\n  "rubyPosition",\n  "scale",\n  "scrollbarColor",\n  "scrollbarGutter",\n  "scrollbarWidth",\n  "scrollBehavior",\n  "scrollMargin",\n  "scrollMarginBlock",\n  "scrollMarginBlockStart",\n  "scrollMarginBlockEnd",\n  "scrollMarginBottom",\n  "scrollMarginInline",\n  "scrollMarginInlineStart",\n  "scrollMarginInlineEnd",\n  "scrollMarginLeft",\n  "scrollMarginRight",\n  "scrollMarginTop",\n  "scrollPadding",\n  "scrollPaddingBlock",\n  "scrollPaddingBlockStart",\n  "scrollPaddingBlockEnd",\n  "scrollPaddingBottom",\n  "scrollPaddingInline",\n  "scrollPaddingInlineStart",\n  "scrollPaddingInlineEnd",\n  "scrollPaddingLeft",\n  "scrollPaddingRight",\n  "scrollPaddingTop",\n  "scrollSnapAlign",\n  "scrollSnapCoordinate",\n  "scrollSnapDestination",\n  "scrollSnapPointsX",\n  "scrollSnapPointsY",\n  "scrollSnapStop",\n  "scrollSnapType",\n  "scrollSnapTypeX",\n  "scrollSnapTypeY",\n  "scrollTimeline",\n  "scrollTimelineAxis",\n  "scrollTimelineName",\n  "shapeImageThreshold",\n  "shapeMargin",\n  "shapeOutside",\n  "tabSize",\n  "tableLayout",\n  "textAlign",\n  "textAlignLast",\n  "textCombineUpright",\n  "textDecoration",\n  "textDecorationColor",\n  "textDecorationLine",\n  "textDecorationSkip",\n  "textDecorationSkipInk",\n  "textDecorationStyle",\n  "textDecorationThickness",\n  "textEmphasis",\n  "textEmphasisColor",\n  "textEmphasisPosition",\n  "textEmphasisStyle",\n  "textIndent",\n  "textJustify",\n  "textOrientation",\n  "textOverflow",\n  "textRendering",\n  "textShadow",\n  "textSizeAdjust",\n  "textTransform",\n  "textUnderlineOffset",\n  "textUnderlinePosition",\n  "top",\n  "touchAction",\n  "transform",\n  "transformBox",\n  "transformOrigin",\n  "transformStyle",\n  "transition",\n  "transitionDelay",\n  "transitionDuration",\n  "transitionProperty",\n  "transitionTimingFunction",\n  "translate",\n  "unicodeBidi",\n  "userSelect",\n  "verticalAlign",\n  "viewTransitionName",\n  "visibility",\n  "whiteSpace",\n  "widows",\n  "width",\n  "willChange",\n  "wordBreak",\n  "wordSpacing",\n  "wordWrap",\n  "writingMode",\n  "zIndex",\n  "zoom",\n  ...userGenerated\n];\nvar properties = new Map(allCssProperties.map((prop) => [prop, true]));\nfunction memo(fn) {\n  const cache = /* @__PURE__ */ Object.create(null);\n  return (arg) => {\n    if (cache[arg] === void 0)\n      cache[arg] = fn(arg);\n    return cache[arg];\n  };\n}\nvar selectorRegex = /&|@/;\nvar isCssProperty = memo((prop) => {\n  return properties.has(prop) || prop.startsWith("--") || selectorRegex.test(prop);\n});\nexport {\n  allCssProperties,\n  isCssProperty\n};\n'
+  content: '// src/index.ts\nvar userGeneratedStr = "";\nvar userGenerated = userGeneratedStr.split(",");\nvar cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationTimingFunction,animationTimeline,appearance,aspectRatio,azimuth,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockOverflow,blockSize,border,borderBlock,borderBlockColor,borderBlockStyle,borderBlockWidth,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineEnd,borderInlineColor,borderInlineStyle,borderInlineWidth,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,color,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicSize,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,direction,display,emptyCells,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontVariationSettings,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inputSecurity,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,printColorAdjust,quotes,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,scale,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockStart,scrollMarginBlockEnd,scrollMarginBottom,scrollMarginInline,scrollMarginInlineStart,scrollMarginInlineEnd,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineStart,scrollPaddingInlineEnd,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,shapeImageThreshold,shapeMargin,shapeOutside,tabSize,tableLayout,textAlign,textAlignLast,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textTransform,textUnderlineOffset,textUnderlinePosition,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,verticalAlign,viewTransitionName,visibility,whiteSpace,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,zIndex,zoom";\nvar allCssProperties = cssPropertiesStr.split(",").concat(userGenerated);\nvar properties = new Map(allCssProperties.map((prop) => [prop, true]));\nfunction memo(fn) {\n  const cache = /* @__PURE__ */ Object.create(null);\n  return (arg) => {\n    if (cache[arg] === void 0)\n      cache[arg] = fn(arg);\n    return cache[arg];\n  };\n}\nvar selectorRegex = /&|@/;\nvar isCssProperty = /* @__PURE__ */ memo((prop) => {\n  return properties.has(prop) || prop.startsWith("--") || selectorRegex.test(prop);\n});\nexport {\n  allCssProperties,\n  isCssProperty\n};\n'
 };
 
 // src/artifacts/js/is-valid-prop.ts
 import { outdent as outdent9 } from "outdent";
-function generateisValidProp(ctx) {
+import { match } from "ts-pattern";
+var cssPropRegex = /var cssPropertiesStr = ".*?";/;
+var memoFnDeclarationRegex = /function memo(.+?)\nvar selectorRegex/s;
+function generateIsValidProp(ctx) {
   if (ctx.isTemplateLiteralSyntax)
     return;
   let content = is_valid_prop_mjs_default.content;
   content = content.replace(
-    "var userGenerated = []",
-    `var userGenerated = [${ctx.properties.map((key) => JSON.stringify(key)).join(",")}]`
+    'var userGeneratedStr = "";',
+    `var userGeneratedStr = "${match(ctx.jsx.styleProps).with("all", () => Array.from(new Set(ctx.properties)).join(",")).with("minimal", () => "css").with("none", () => "").exhaustive()}"`
   );
+  content = content.replace(memoFnDeclarationRegex, "var selectorRegex");
+  if (ctx.jsx.styleProps === "minimal" || ctx.jsx.styleProps === "none") {
+    content = content.replace("/* @__PURE__ */ memo(", "/* @__PURE__ */ (");
+    content = content.replace(cssPropRegex, 'var cssPropertiesStr = "";');
+  } else {
+    content = ctx.file.import("memo", "../helpers") + "\n" + content;
+  }
   return {
     js: content,
     dts: outdent9`
@@ -855,16 +905,16 @@ function generateisValidProp(ctx) {
 
 // src/artifacts/js/pattern.ts
 import { unionType } from "@pandacss/shared";
-import { stringify as stringify2 } from "javascript-stringify";
+import { stringify } from "javascript-stringify";
 import { outdent as outdent10 } from "outdent";
-import { match } from "ts-pattern";
+import { match as match2 } from "ts-pattern";
 function generatePattern(ctx) {
   if (ctx.patterns.isEmpty())
     return;
   return ctx.patterns.details.map((pattern) => {
     const { baseName, config, dashName, upperName, styleFnName, blocklistType } = pattern;
     const { properties, transform, strict, description } = config;
-    const transformFn = stringify2({ transform }) ?? "";
+    const transformFn = stringify({ transform }) ?? "";
     const helperImports = ["mapObject"];
     if (transformFn.includes("__spreadValues")) {
       helperImports.push("__spreadValues");
@@ -883,7 +933,7 @@ function generatePattern(ctx) {
       export type ${upperName}Properties = {
          ${Object.keys(properties ?? {}).map((key) => {
         const value = properties[key];
-        return match(value).with({ type: "property" }, (value2) => {
+        return match2(value).with({ type: "property" }, (value2) => {
           return `${key}?: PropertyValue<'${value2.value}'>`;
         }).with({ type: "token" }, (value2) => {
           if (value2.property) {
@@ -929,9 +979,11 @@ transform`)}
 }
 
 // src/artifacts/js/recipe.ts
+import { isSlotRecipe } from "@pandacss/core";
 import { unionType as unionType2 } from "@pandacss/shared";
 import { outdent as outdent11 } from "outdent";
-var stringify3 = (value) => JSON.stringify(value, null, 2);
+import { match as match3 } from "ts-pattern";
+var stringify2 = (value) => JSON.stringify(value, null, 2);
 var isBooleanValue = (value) => value === "true" || value === "false";
 function generateRecipes(ctx) {
   const {
@@ -964,9 +1016,9 @@ function generateRecipes(ctx) {
       }
 
       const recipeCss = createCss({
-        hash: ${hash ? "true" : "false"},
+        ${hash ? "hash: true," : ""}
         utility: {
-          prefix: ${prefix ? JSON.stringify(prefix) : void 0},
+          ${prefix ? "prefix: " + JSON.stringify(prefix) + "," : ""}
           transform,
         }
       })
@@ -989,26 +1041,59 @@ function generateRecipes(ctx) {
     ...ctx.recipes.details.map((recipe) => {
       const { baseName, config, upperName, variantKeyMap, dashName } = recipe;
       const { description, defaultVariants, compoundVariants } = config;
-      return {
-        name: dashName,
-        js: outdent11`
+      const jsCode = match3(config).when(
+        isSlotRecipe,
+        (config2) => outdent11`
+        ${ctx.file.import("splitProps, getSlotCompoundVariant", "../helpers")}
+        ${ctx.file.import("createRecipe", "./create-recipe")}
+
+        const ${baseName}DefaultVariants = ${stringify2(defaultVariants ?? {})}
+        const ${baseName}CompoundVariants = ${stringify2(compoundVariants ?? [])}
+
+        const ${baseName}SlotNames = ${stringify2(config2.slots.map((slot) => [slot, `${config2.className}__${slot}`]))}
+        const ${baseName}SlotFns = ${baseName}SlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, ${baseName}DefaultVariants, getSlotCompoundVariant(${baseName}CompoundVariants, slotName))])
+
+        const ${baseName}Fn = (props = {}) => {
+          return Object.fromEntries(${baseName}SlotFns.map(([slotName, slotFn]) => [slotName, slotFn(props)]))
+        }
+
+        const ${baseName}VariantKeys = ${stringify2(Object.keys(variantKeyMap))}
+
+        export const ${baseName} = Object.assign(${baseName}Fn, {
+          __recipe__: false,
+          raw: (props) => props,
+          variantKeys: ${baseName}VariantKeys,
+          variantMap: ${stringify2(variantKeyMap)},
+          splitVariantProps(props) {
+            return splitProps(props, ${baseName}VariantKeys)
+          },
+        })
+        `
+      ).otherwise(
+        (config2) => outdent11`
         ${ctx.file.import("splitProps", "../helpers")}
         ${ctx.file.import("createRecipe", "./create-recipe")}
 
-        const ${baseName}Fn = createRecipe('${baseName}', ${stringify3(defaultVariants ?? {})}, ${stringify3(
+        const ${baseName}Fn = createRecipe('${config2.className}', ${stringify2(defaultVariants ?? {})}, ${stringify2(
           compoundVariants ?? []
         )})
 
+        const ${baseName}VariantMap = ${stringify2(variantKeyMap)}
+        const ${baseName}VariantKeys = Object.keys(${baseName}VariantMap)
         export const ${baseName} = Object.assign(${baseName}Fn, {
           __recipe__: true,
           raw: (props) => props,
-          variantKeys: ${stringify3(Object.keys(variantKeyMap))},
-          variantMap: ${stringify3(variantKeyMap)},
+          variantKeys: ${baseName}VariantKeys,
+          variantMap: ${baseName}VariantMap,
           splitVariantProps(props) {
-            return splitProps(props, ${stringify3(Object.keys(variantKeyMap))})
+            return splitProps(props, ${baseName}VariantKeys)
           },
         })
-        `,
+        `
+      );
+      return {
+        name: dashName,
+        js: jsCode,
         dts: outdent11`
         import type { ConditionalValue } from '../types'
         import type { Pretty } from '../types/helpers'
@@ -1032,7 +1117,7 @@ function generateRecipes(ctx) {
 
         interface ${upperName}Recipe {
           __type: ${upperName}VariantProps
-          (props?: ${upperName}VariantProps): string
+          (props?: ${upperName}VariantProps): ${isSlotRecipe(config) ? `Pretty<Record<${unionType2(config.slots)}, string>>` : "string"}
           raw: (props?: ${upperName}VariantProps) => ${upperName}VariantProps
           variantMap: ${upperName}VariantMap
           variantKeys: Array<keyof ${upperName}Variant>
@@ -1047,8 +1132,42 @@ function generateRecipes(ctx) {
   ];
 }
 
+// src/artifacts/js/sva.ts
+import { outdent as outdent12 } from "outdent";
+function generateSvaFn(ctx) {
+  return {
+    js: outdent12`
+    ${ctx.file.import("getSlotRecipes", "../helpers")}
+    ${ctx.file.import("cva", "./cva")}
+
+    export function sva(config) {
+      const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)])
+      
+      function svaFn(props) {
+        const result = slots.map(([slot, cvaFn]) => [slot, cvaFn(props)])
+        return Object.fromEntries(result)
+      }
+
+      const [, firstCva] = slots[0]
+
+      return Object.assign(svaFn, {
+        __cva__: false,
+        variantMap: firstCva.variantMap,
+        variantKeys: firstCva.variantKeys,
+        splitVariantProps: firstCva.splitVariantProps,
+      })
+    }
+    `,
+    dts: outdent12`
+    import type { SlotRecipeCreatorFn } from '../types/recipe'
+
+    export declare const sva: SlotRecipeCreatorFn
+    `
+  };
+}
+
 // src/artifacts/js/token.ts
-import outdent12 from "outdent";
+import outdent13 from "outdent";
 function generateTokenJs(ctx) {
   const { tokens } = ctx;
   const map = /* @__PURE__ */ new Map();
@@ -1059,7 +1178,7 @@ function generateTokenJs(ctx) {
   });
   const obj = Object.fromEntries(map);
   return {
-    js: outdent12`
+    js: outdent13`
   const tokens = ${JSON.stringify(obj, null, 2)}
 
   export function token(path, fallback) {
@@ -1072,7 +1191,7 @@ function generateTokenJs(ctx) {
 
   token.var = tokenVar
   `,
-    dts: outdent12`
+    dts: outdent13`
   import type { Token } from './tokens'
 
   export declare const token: {
@@ -1086,43 +1205,43 @@ function generateTokenJs(ctx) {
 }
 
 // src/artifacts/preact-jsx/jsx.ts
-import { outdent as outdent13 } from "outdent";
+import { outdent as outdent14 } from "outdent";
 function generatePreactJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent13`
+    js: outdent14`
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
     import { useMemo } from 'preact/hooks'
     ${ctx.file.import("css, cx, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
     ${ctx.file.import("isCssProperty", "./is-valid-prop")}
-    
+
     function styledFn(Dynamic, configOrCva = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
-      
-      const ${componentName} = forwardRef(function ${componentName}(props, ref) {
+
+      const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
         const { as: Element = Dynamic, ...restProps } = props
 
         const [variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
           return splitProps(restProps, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
         }, [restProps])
-    
+
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const styles = assignCss(propStyles, cssStyles)
           return cx(cvaFn(variantProps), css(styles), elementProps.className, elementProps.class)
         }
-        
+
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const cvaStyles = cvaFn.resolve(variantProps)
           const styles = assignCss(cvaStyles, propStyles, cssStyles)
           return cx(css(styles), elementProps.className, elementProps.class)
         }
-    
+
         const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
-        
+
         return h(Element, {
           ...elementProps,
           ...normalizeHTMLProps(htmlProps),
@@ -1130,14 +1249,14 @@ function generatePreactJsxFactory(ctx) {
           className: classes()
         })
       })
-      
+
       ${componentName}.displayName = \`${factoryName}.\${Dynamic}\`
       return ${componentName}
     }
-    
+
     function createJsxFactory() {
       const cache = new Map()
-    
+
       return new Proxy(styledFn, {
         apply(_, __, args) {
           return styledFn(...args)
@@ -1151,14 +1270,14 @@ function generatePreactJsxFactory(ctx) {
       })
     }
 
-    export const ${factoryName} = createJsxFactory()
+    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
     `
   };
 }
 
 // src/artifacts/preact-jsx/pattern.ts
-import { outdent as outdent14 } from "outdent";
-import { match as match2 } from "ts-pattern";
+import { outdent as outdent15 } from "outdent";
+import { match as match4 } from "ts-pattern";
 function generatePreactJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -1166,35 +1285,35 @@ function generatePreactJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: outdent14`
+      js: outdent15`
       import { h } from 'preact'
       import { forwardRef } from 'preact/compat'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
-  
-      export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
-        ${match2(props.length).with(
+
+      export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
+        ${match4(props.length).with(
         0,
-        () => outdent14`
+        () => outdent15`
           const styleProps = ${styleFnName}()
           return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
           `
       ).otherwise(
-        () => outdent14`
+        () => outdent15`
           const { ${props.join(", ")}, ...restProps } = props
           const styleProps = ${styleFnName}({${props.join(", ")}})
           return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
           `
       )}
-      })    
+      })
       `,
-      dts: outdent14`
+      dts: outdent15`
       import type { FunctionComponent } from 'preact'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
-  
+
       export type ${upperName}Props = ${upperName}Properties & Omit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
-  
+
       ${description ? `/** ${description} */` : ""}
       export declare const ${jsxName}: FunctionComponent<${upperName}Props>
       `
@@ -1203,15 +1322,15 @@ function generatePreactJsxPattern(ctx) {
 }
 
 // src/artifacts/preact-jsx/types.ts
-import { outdent as outdent15 } from "outdent";
+import { outdent as outdent16 } from "outdent";
 function generatePreactJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent15`
+    jsxFactory: outdent16`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent15`
+    jsxType: outdent16`
 import type { ComponentProps, JSX } from 'preact'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1228,7 +1347,7 @@ export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
 type RecipeFn = { __type: any }
 
 interface JsxFactory {
-  <T extends ElementType>(component: T): ${componentName}<T, {}>
+  ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
   <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
     T,
     RecipeSelection<P>
@@ -1238,7 +1357,7 @@ interface JsxFactory {
 
 type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
 
-export type ${upperName} = JsxFactory & JsxElements
+export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
   `
@@ -1246,37 +1365,37 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
 }
 
 // src/artifacts/preact-jsx/jsx.string-literal.ts
-import { outdent as outdent16 } from "outdent";
+import { outdent as outdent17 } from "outdent";
 function generatePreactJsxStringLiteralFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent16`
+    js: outdent17`
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
     ${ctx.file.import("css, cx", "../css/index")}
-    
+
     function createStyledFn(Dynamic) {
       return function styledFn(template) {
         const baseClassName = css(template)
-        const ${componentName} = forwardRef(function ${componentName}(props, ref) {
+        const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
           const { as: Element = Dynamic, ...elementProps } = props
           const classes = () => cx(baseClassName, elementProps.className)
-        
+
           return h(Element, {
             ref,
             ...elementProps,
             className: classes(),
           })
         })
-        
+
         ${componentName}.displayName = \`${factoryName}.\${Dynamic}\`
         return ${componentName}
       }
     }
-    
+
     function createJsxFactory() {
       const cache = new Map()
-    
+
       return new Proxy(createStyledFn, {
         apply(_, __, args) {
           return createStyledFn(...args)
@@ -1290,21 +1409,21 @@ function generatePreactJsxStringLiteralFactory(ctx) {
       })
     }
 
-    export const ${factoryName} = createJsxFactory()
+    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
     `
   };
 }
 
 // src/artifacts/preact-jsx/types.string-literal.ts
-import { outdent as outdent17 } from "outdent";
+import { outdent as outdent18 } from "outdent";
 function generatePreactJsxStringLiteralTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent17`
+    jsxFactory: outdent18`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent17`
+    jsxType: outdent18`
 import type { ComponentProps, JSX } from 'preact'
 
 type ElementType = keyof JSX.IntrinsicElements
@@ -1322,7 +1441,7 @@ interface JsxFactory {
 
 type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
 
-export type ${upperName} = JsxFactory & JsxElements
+export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
 
 export type ${typeName}<T extends ElementType> = ComponentProps<T>
   `
@@ -1330,54 +1449,54 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/qwik-jsx/jsx.ts
-import { outdent as outdent18 } from "outdent";
+import { outdent as outdent19 } from "outdent";
 function generateQwikJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent18`
+    js: outdent19`
     import { h } from '@builder.io/qwik'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
     ${ctx.file.import("isCssProperty", "./is-valid-prop")}
-    
+
     function styledFn(Dynamic, configOrCva = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
-      
+
       const ${componentName} = function ${componentName}(props) {
         const { as: Element = Dynamic, ...restProps } = props
-    
-        const [variantProps, styleProps, htmlProps, elementProps] = 
+
+        const [variantProps, styleProps, htmlProps, elementProps] =
             splitProps(restProps, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
-        
+
         const { css: cssStyles, ...propStyles } = styleProps
-    
+
         function recipeClass() {
           const styles = assignCss(propStyles, cssStyles)
           return cx(cvaFn(variantProps), css(styles), elementProps.class)
         }
-    
+
         function cvaClass() {
           const cvaStyles = cvaFn.resolve(variantProps)
           const styles = assignCss(cvaStyles, propStyles, cssStyles)
           return cx(css(styles), elementProps.class)
         }
-    
+
         const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
-    
+
         return h(Element, {
           ...elementProps,
           ...normalizeHTMLProps(htmlProps),
           class: classes(),
         })
       }
-      
+
       ${componentName}.displayName = \`${factoryName}.\${Dynamic}\`
       return ${componentName}
     }
-    
+
     function createJsxFactory() {
       const cache = new Map()
-    
+
       return new Proxy(styledFn, {
         apply(_, __, args) {
           return styledFn(...args)
@@ -1391,15 +1510,15 @@ function generateQwikJsxFactory(ctx) {
       })
     }
 
-    export const ${factoryName} = createJsxFactory()
+    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
 
     `
   };
 }
 
 // src/artifacts/qwik-jsx/pattern.ts
-import { outdent as outdent19 } from "outdent";
-import { match as match3 } from "ts-pattern";
+import { outdent as outdent20 } from "outdent";
+import { match as match5 } from "ts-pattern";
 function generateQwikJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -1407,20 +1526,20 @@ function generateQwikJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: outdent19`
+      js: outdent20`
       import { h } from '@builder.io/qwik'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
   
       export const ${jsxName} = function ${jsxName}(props) {
-        ${match3(props.length).with(
+        ${match5(props.length).with(
         0,
-        () => outdent19`
+        () => outdent20`
         const styleProps = ${styleFnName}()
         return h(${factoryName}.${jsxElement}, { ...styleProps, ...props })
           `
       ).otherwise(
-        () => outdent19`
+        () => outdent20`
         const { ${props.join(", ")}, ...restProps } = props
         const styleProps = ${styleFnName}({${props.join(", ")}})
         return h(${factoryName}.${jsxElement}, { ...styleProps, ...restProps })
@@ -1428,7 +1547,7 @@ function generateQwikJsxPattern(ctx) {
       )}
       }
       `,
-      dts: outdent19`
+      dts: outdent20`
       import type { FunctionComponent } from '@builder.io/qwik'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
@@ -1447,15 +1566,15 @@ function generateQwikJsxPattern(ctx) {
 }
 
 // src/artifacts/qwik-jsx/types.ts
-import { outdent as outdent20 } from "outdent";
+import { outdent as outdent21 } from "outdent";
 function generateQwikJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent20`
+    jsxFactory: outdent21`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent20`
+    jsxType: outdent21`
 import type { FunctionComponent, QwikIntrinsicElements } from '@builder.io/qwik'
 import type { Assign as _Assign, JsxStyleProps, PatchedHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1491,7 +1610,7 @@ export type ${componentName}<T extends ElementType, P extends Dict = {}> = Funct
 type RecipeFn = { __type: any }
 
 interface JsxFactory {
-  <T extends ElementType>(component: T): ${componentName}<T, {}>
+  ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
   <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
     T,
     RecipeSelection<P>
@@ -1501,7 +1620,7 @@ interface JsxFactory {
 
 type JsxElements = { [K in keyof QwikIntrinsicElements]: ${componentName}<K, {}> }
 
-export type ${upperName} = JsxFactory & JsxElements
+export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
 
 export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T>, JsxStyleProps>
   `
@@ -1509,35 +1628,35 @@ export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T>, JsxSt
 }
 
 // src/artifacts/qwik-jsx/jsx.string-literal.ts
-import { outdent as outdent21 } from "outdent";
+import { outdent as outdent22 } from "outdent";
 function generateQwikJsxStringLiteralFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent21`
+    js: outdent22`
     import { h } from '@builder.io/qwik'
     ${ctx.file.import("css, cx", "../css/index")}
-    
+
     function createStyledFn(Dynamic) {
       return function styledFn(template) {
           const baseClassName = css(template)
           const ${componentName} = function ${componentName}(props) {
               const { as: Element = Dynamic, ...elementProps } = props
               const classes = () => cx(baseClassName, elementProps.className)
-          
+
               return h(Element, {
                   ...elementProps,
                   className: classes(),
               })
           }
-          
+
           ${componentName}.displayName = \`${factoryName}.\${Dynamic}\`
           return ${componentName}
         }
     }
-    
+
     function createJsxFactory() {
       const cache = new Map()
-    
+
       return new Proxy(createStyledFn, {
         apply(_, __, args) {
           return createStyledFn(...args)
@@ -1551,22 +1670,22 @@ function generateQwikJsxStringLiteralFactory(ctx) {
       })
     }
 
-    export const ${factoryName} = createJsxFactory()
+    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
 
     `
   };
 }
 
 // src/artifacts/qwik-jsx/types.string-literal.ts
-import { outdent as outdent22 } from "outdent";
+import { outdent as outdent23 } from "outdent";
 function generateQwikJsxStringLiteralTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent22`
+    jsxFactory: outdent23`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent22`
+    jsxType: outdent23`
 import type { FunctionComponent, QwikIntrinsicElements } from '@builder.io/qwik'
 
 type ElementType = keyof QwikIntrinsicElements | FunctionComponent<any>
@@ -1589,7 +1708,7 @@ interface JsxFactory {
 
 type JsxElements = { [K in keyof QwikIntrinsicElements]: ${componentName}<K> }
 
-export type ${upperName} = JsxFactory & JsxElements
+export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
 
 export type ${typeName}<T extends ElementType> = ComponentProps<T>
   `
@@ -1597,41 +1716,76 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/react-jsx/jsx.ts
-import { outdent as outdent23 } from "outdent";
+import { outdent as outdent24 } from "outdent";
+import { match as match6 } from "ts-pattern";
 function generateReactJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent23`
+    js: outdent24`
     import { createElement, forwardRef, useMemo } from 'react'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
-    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
-    
+    ${ctx.jsx.styleProps === "all" ? ctx.file.import("isCssProperty", "./is-valid-prop") : ""}
+
     function styledFn(Dynamic, configOrCva = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
-      
-      const ${componentName} = forwardRef(function ${componentName}(props, ref) {
+
+      const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
         const { as: Element = Dynamic, ...restProps } = props
-    
-        const [variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
-          return splitProps(restProps, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
-        }, [restProps])
 
-        function recipeClass() {
-          const { css: cssStyles, ...propStyles } = styleProps
-          const styles = assignCss(propStyles, cssStyles)
-          return cx(cvaFn(variantProps), css(styles), elementProps.className)
-        }
-        
-        function cvaClass() {
-          const { css: cssStyles, ...propStyles } = styleProps
-          const cvaStyles = cvaFn.resolve(variantProps)
-          const styles = assignCss(cvaStyles, propStyles, cssStyles)
-          return cx(css(styles), elementProps.className)
-        }
-    
+        ${match6(ctx.jsx.styleProps).with("all", () => {
+      return outdent24`
+          const [variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
+            return splitProps(restProps, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
+          }, [restProps])
+
+          function recipeClass() {
+            const { css: cssStyles, ...propStyles } = styleProps
+            const styles = assignCss(propStyles, cssStyles)
+            return cx(cvaFn(variantProps), css(styles), elementProps.className)
+          }
+
+          function cvaClass() {
+            const { css: cssStyles, ...propStyles } = styleProps
+            const cvaStyles = cvaFn.resolve(variantProps)
+            const styles = assignCss(cvaStyles, propStyles, cssStyles)
+            return cx(css(styles), elementProps.className)
+          }`;
+    }).with("minimal", () => {
+      return outdent24`
+          const [variantProps, htmlProps, elementProps] = useMemo(() => {
+            return splitProps(restProps, cvaFn.variantKeys, normalizeHTMLProps.keys)
+          }, [restProps])
+
+          function recipeClass() {
+            return cx(cvaFn(variantProps), css(assignCss(elementProps.css)), elementProps.className)
+          }
+
+          function cvaClass() {
+            const cvaStyles = cvaFn.resolve(variantProps)
+            const styles = assignCss(cvaStyles, elementProps.css)
+            return cx(css(styles), elementProps.className)
+          }`;
+    }).with("none", () => {
+      return outdent24`
+          const [variantProps, htmlProps, elementProps] = useMemo(() => {
+            return splitProps(restProps, cvaFn.variantKeys, normalizeHTMLProps.keys)
+          }, [restProps])
+
+          function recipeClass() {
+            return cx(cvaFn(variantProps), elementProps.className)
+          }
+
+          function cvaClass() {
+            const cvaStyles = cvaFn.resolve(variantProps)
+            const styles = assignCss(cvaStyles)
+            return cx(css(styles), elementProps.className)
+          }`;
+    }).run()}
+
+
         const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
-    
+
         return createElement(Element, {
           ref,
           ...elementProps,
@@ -1639,14 +1793,14 @@ function generateReactJsxFactory(ctx) {
           className: classes(),
         })
       })
-      
+
       ${componentName}.displayName = \`${factoryName}.\${Dynamic}\`
       return ${componentName}
     }
-    
+
     function createJsxFactory() {
       const cache = new Map()
-    
+
       return new Proxy(styledFn, {
         apply(_, __, args) {
           return styledFn(...args)
@@ -1660,15 +1814,15 @@ function generateReactJsxFactory(ctx) {
       })
     }
 
-    export const ${factoryName} = createJsxFactory()
+    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
 
     `
   };
 }
 
 // src/artifacts/react-jsx/pattern.ts
-import { outdent as outdent24 } from "outdent";
-import { match as match4 } from "ts-pattern";
+import { outdent as outdent25 } from "outdent";
+import { match as match7 } from "ts-pattern";
 function generateReactJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -1676,34 +1830,34 @@ function generateReactJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: outdent24`
+      js: outdent25`
       import { createElement, forwardRef } from 'react'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
-  
-      export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
-        ${match4(props.length).with(
+
+      export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
+        ${match7(props.length).with(
         0,
-        () => outdent24`
+        () => outdent25`
         const styleProps = ${styleFnName}()
         return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
           `
       ).otherwise(
-        () => outdent24`
+        () => outdent25`
         const { ${props.join(", ")}, ...restProps } = props
         const styleProps = ${styleFnName}({${props.join(", ")}})
         return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
           `
       )}
-      })    
+      })
       `,
-      dts: outdent24`
+      dts: outdent25`
       import type { FunctionComponent } from 'react'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
-  
+
       export type ${upperName}Props = ${upperName}Properties & Omit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
-  
+
       ${description ? `/** ${description} */` : ""}
       export declare const ${jsxName}: FunctionComponent<${upperName}Props>
       `
@@ -1712,15 +1866,15 @@ function generateReactJsxPattern(ctx) {
 }
 
 // src/artifacts/react-jsx/types.ts
-import { outdent as outdent25 } from "outdent";
+import { outdent as outdent26 } from "outdent";
 function generateReactJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent25`
+    jsxFactory: outdent26`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent25`
+    jsxType: outdent26`
 import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1739,7 +1893,7 @@ export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
 type RecipeFn = { __type: any }
 
 interface JsxFactory {
-  <T extends ElementType>(component: T): ${componentName}<T, {}>
+  ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
   <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
     T,
     RecipeSelection<P>
@@ -1749,7 +1903,7 @@ interface JsxFactory {
 
 type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
 
-export type ${upperName} = JsxFactory & JsxElements
+export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
   `
@@ -1757,36 +1911,36 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
 }
 
 // src/artifacts/react-jsx/jsx.string-literal.ts
-import { outdent as outdent26 } from "outdent";
+import { outdent as outdent27 } from "outdent";
 function generateReactJsxStringLiteralFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent26`
+    js: outdent27`
     import { createElement, forwardRef } from 'react'
     ${ctx.file.import("css, cx", "../css/index")}
-    
+
     function createStyledFn(Dynamic) {
       return function styledFn(template) {
         const baseClassName = css(template)
-        const ${componentName} = forwardRef(function ${componentName}(props, ref) {
+        const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
             const { as: Element = Dynamic, ...elementProps } = props
             const classes = () => cx(baseClassName, elementProps.className)
-        
+
             return createElement(Element, {
                 ref,
                 ...elementProps,
                 className: classes(),
             })
         })
-        
+
         ${componentName}.displayName = \`${factoryName}.\${Dynamic}\`
         return ${componentName}
       }
     }
-    
+
     function createJsxFactory() {
       const cache = new Map()
-    
+
       return new Proxy(createStyledFn, {
         apply(_, __, args) {
           return createStyledFn(...args)
@@ -1800,22 +1954,22 @@ function generateReactJsxStringLiteralFactory(ctx) {
       })
     }
 
-    export const ${factoryName} = createJsxFactory()
+    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
 
     `
   };
 }
 
 // src/artifacts/react-jsx/types.string-literal.ts
-import { outdent as outdent27 } from "outdent";
+import { outdent as outdent28 } from "outdent";
 function generateReactJsxStringLiteralTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent27`
+    jsxFactory: outdent28`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent27`
+    jsxType: outdent28`
 import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
 
 type Dict = Record<string, unknown>
@@ -1835,7 +1989,7 @@ interface JsxFactory {
 
 type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
 
-export type ${upperName} = JsxFactory & JsxElements
+export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
 
 export type ${typeName}<T extends ElementType> = ComponentProps<T>
   `
@@ -1843,24 +1997,24 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/solid-jsx/jsx.ts
-import { outdent as outdent28 } from "outdent";
+import { outdent as outdent29 } from "outdent";
 function generateSolidJsxFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
-    js: outdent28`
+    js: outdent29`
     import { Dynamic } from 'solid-js/web'
     import { mergeProps, splitProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("normalizeHTMLProps", "../helpers")}
     ${ctx.file.import("allCssProperties", "./is-valid-prop")}
-    
+
     function styledFn(element, configOrCva = {}) {
       const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
-      
+
       return function ${componentName}(props) {
         const mergedProps = mergeProps({ as: element }, props)
-    
+
         const [localProps, variantProps, styleProps, htmlProps, elementProps] = splitProps(
           mergedProps,
           ['as', 'class'],
@@ -1874,16 +2028,16 @@ function generateSolidJsxFactory(ctx) {
           const styles = assignCss(propStyles, cssStyles)
           return cx(cvaFn(variantProps), css(styles), localProps.class)
         }
-        
+
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const cvaStyles = cvaFn.resolve(variantProps)
           const styles = assignCss(cvaStyles, propStyles, cssStyles)
           return cx(css(styles), localProps.class)
         }
-    
+
         const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
-        
+
         return createComponent(
           Dynamic,
           mergeProps(
@@ -1901,10 +2055,10 @@ function generateSolidJsxFactory(ctx) {
         )
       }
     }
-    
+
     function createJsxFactory() {
       const cache = new Map()
-    
+
       return new Proxy(styledFn, {
         apply(_, __, args) {
           return styledFn(...args)
@@ -1917,15 +2071,15 @@ function generateSolidJsxFactory(ctx) {
         },
       })
     }
-      
-    export const ${factoryName} = createJsxFactory()
+
+    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
     `
   };
 }
 
 // src/artifacts/solid-jsx/pattern.ts
-import { outdent as outdent29 } from "outdent";
-import { match as match5 } from "ts-pattern";
+import { outdent as outdent30 } from "outdent";
+import { match as match8 } from "ts-pattern";
 function generateSolidJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -1933,21 +2087,21 @@ function generateSolidJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: outdent29`
+      js: outdent30`
     import { splitProps, mergeProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
     ${ctx.file.import(factoryName, "./factory")}
     ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
 
     export function ${jsxName}(props) {
-      ${match5(props.length).with(
+      ${match8(props.length).with(
         0,
-        () => outdent29`
+        () => outdent30`
           const styleProps = ${styleFnName}()
           return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, props))
         `
       ).otherwise(
-        () => outdent29`
+        () => outdent30`
           const [patternProps, restProps] = splitProps(props, [${props.map((v) => JSON.stringify(v)).join(", ")}]);
           const styleProps = ${styleFnName}(patternProps)
           return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, restProps))
@@ -1955,7 +2109,7 @@ function generateSolidJsxPattern(ctx) {
       )}
     }
     `,
-      dts: outdent29`
+      dts: outdent30`
     import { Component } from 'solid-js'
     import { ${upperName}Properties } from '../patterns/${dashName}'
     import { ${typeName} } from '../types/jsx'
@@ -1970,15 +2124,15 @@ function generateSolidJsxPattern(ctx) {
 }
 
 // src/artifacts/solid-jsx/types.ts
-import { outdent as outdent30 } from "outdent";
+import { outdent as outdent31 } from "outdent";
 function generateSolidJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent30`
+    jsxFactory: outdent31`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent30`
+    jsxType: outdent31`
 import type { ComponentProps, Component, JSX } from 'solid-js'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1995,7 +2149,7 @@ export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
 type RecipeFn = { __type: any }
 
 interface JsxFactory {
-  <T extends ElementType>(component: T): ${componentName}<T, {}>
+  ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
   <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
     T,
     RecipeSelection<P>
@@ -2005,7 +2159,7 @@ interface JsxFactory {
 
 type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
 
-export type ${upperName} = JsxFactory & JsxElements
+export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
   `
@@ -2013,11 +2167,11 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
 }
 
 // src/artifacts/solid-jsx/jsx.string-literal.ts
-import { outdent as outdent31 } from "outdent";
+import { outdent as outdent32 } from "outdent";
 function generateSolidJsxStringLiteralFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
-    js: outdent31`
+    js: outdent32`
 import { mergeProps, splitProps } from 'solid-js'
 import { Dynamic, createComponent } from 'solid-js/web'
 ${ctx.file.import("css, cx", "../css/index")}
@@ -2028,7 +2182,7 @@ function createStyled(element) {
     return function ${componentName}(props) {
       const mergedProps = mergeProps({ as: element }, props)
       const [localProps, elementProps] = splitProps(mergedProps, ['as', 'class'])
-      
+
       return createComponent(
         Dynamic,
         mergeProps(
@@ -2063,21 +2217,21 @@ function createJsxFactory() {
   })
 }
 
-export const ${factoryName} = createJsxFactory()
+export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
     `
   };
 }
 
 // src/artifacts/solid-jsx/types.string-literal.ts
-import { outdent as outdent32 } from "outdent";
+import { outdent as outdent33 } from "outdent";
 function generateSolidJsxStringLiteralTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent32`
+    jsxFactory: outdent33`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent32`
+    jsxType: outdent33`
 import type { Component, ComponentProps, JSX } from 'solid-js'
 
 type Dict = Record<string, unknown>
@@ -2095,7 +2249,7 @@ interface JsxFactory {
 
 type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
 
-export type Styled = JsxFactory & JsxElements
+export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
 
 export type ${typeName}<T extends ElementType> = ComponentProps<T>
   `
@@ -2103,16 +2257,16 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/vue-jsx/jsx.ts
-import { outdent as outdent33 } from "outdent";
+import { outdent as outdent34 } from "outdent";
 function generateVueJsxFactory(ctx) {
   const { factoryName } = ctx.jsx;
   return {
-    js: outdent33`
+    js: outdent34`
     import { defineComponent, h, computed } from 'vue'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
     ${ctx.file.import("isCssProperty", "./is-valid-prop")}
-    
+
     function styledFn(Dynamic, configOrCva = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
 
@@ -2140,10 +2294,10 @@ function generateVueJsxFactory(ctx) {
           })
 
           const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
-    
+
           return () => {
             const [_styleProps, _variantProps, htmlProps, elementProps] = splittedProps.value
-            
+
             return h(
               props.as,
               {
@@ -2157,10 +2311,10 @@ function generateVueJsxFactory(ctx) {
         },
       })
     }
-    
+
     function createJsxFactory() {
       const cache = new Map()
-    
+
       return new Proxy(styledFn, {
         apply(_, __, args) {
           return styledFn(...args)
@@ -2174,21 +2328,21 @@ function generateVueJsxFactory(ctx) {
       })
     }
 
-    export const ${factoryName} = createJsxFactory()
+    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
 
     `
   };
 }
 
 // src/artifacts/vue-jsx/jsx.string-literal.ts
-import { outdent as outdent34 } from "outdent";
+import { outdent as outdent35 } from "outdent";
 function generateVueJsxStringLiteralFactory(ctx) {
   const { factoryName } = ctx.jsx;
   return {
-    js: outdent34`
+    js: outdent35`
     import { defineComponent, h, computed } from 'vue'
     ${ctx.file.import("css, cx", "../css/index")}
-    
+
   function createStyled(Dynamic) {
     function styledFn(template) {
       const baseClassName = css(template)
@@ -2212,10 +2366,10 @@ function generateVueJsxStringLiteralFactory(ctx) {
       })
     }
   }
-    
+
     function createJsxFactory() {
       const cache = new Map()
-    
+
       return new Proxy(createStyled, {
         apply(_, __, args) {
           return createStyled(...args)
@@ -2229,13 +2383,13 @@ function generateVueJsxStringLiteralFactory(ctx) {
       })
     }
 
-    export const ${factoryName} = createJsxFactory()
+    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
     `
   };
 }
 
 // src/artifacts/vue-jsx/pattern.ts
-import { outdent as outdent35 } from "outdent";
+import { outdent as outdent36 } from "outdent";
 function generateVueJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -2244,7 +2398,7 @@ function generateVueJsxPattern(ctx) {
     const propList = props.map((v) => JSON.stringify(v)).join(", ");
     return {
       name: dashName,
-      js: outdent35`
+      js: outdent36`
     import { defineComponent, h, computed } from 'vue'
     ${ctx.file.import(factoryName, "./factory")}
     ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
@@ -2262,7 +2416,7 @@ function generateVueJsxPattern(ctx) {
         }
     })
     `,
-      dts: outdent35`
+      dts: outdent36`
     import { FunctionalComponent } from 'vue'
     import { ${upperName}Properties } from '../patterns/${dashName}'
     import { ${typeName} } from '../types/jsx'
@@ -2277,15 +2431,15 @@ function generateVueJsxPattern(ctx) {
 }
 
 // src/artifacts/vue-jsx/types.ts
-import { outdent as outdent36 } from "outdent";
+import { outdent as outdent37 } from "outdent";
 function generateVueJsxTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent36`
+    jsxFactory: outdent37`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent36`
+    jsxType: outdent37`
 import type { Component, FunctionalComponent } from 'vue'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -2424,33 +2578,33 @@ type IntrinsicElement =
   type RecipeFn = { __type: any }
 
   interface JsxFactory {
-    <T extends ElementType>(component: T): ${componentName}<T, {}>
+    ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
     <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
       T,
       RecipeSelection<P>
     >
     <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P): ${componentName}<T, P['__type']>
   }
-  
+
   type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
-  
-  export type ${upperName} = JsxFactory & JsxElements
-    
+
+  export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
+
   export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
   `
   };
 }
 
 // src/artifacts/vue-jsx/types.string-literal.ts
-import { outdent as outdent37 } from "outdent";
+import { outdent as outdent38 } from "outdent";
 function generateVueJsxStringLiteralTypes(ctx) {
-  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent37`
+    jsxFactory: outdent38`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent37`
+    jsxType: outdent38`
 import type { Component, FunctionalComponent } from 'vue'
 
 type IntrinsicElement =
@@ -2586,11 +2740,11 @@ type IntrinsicElement =
   interface JsxFactory {
     <T extends ElementType>(component: T): ${componentName}<T>
   }
-  
+
   type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
-  
-  export type ${upperName} = JsxFactory & JsxElements
-    
+
+  export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
+
   export type ${typeName}<T extends ElementType> = ComponentProps<T>
   `
   };
@@ -2605,8 +2759,8 @@ var typesMap = {
   qwik: generateQwikJsxTypes
 };
 var typesStringLiteralMap = {
-  react: generateSolidJsxStringLiteralTypes,
-  solid: generateReactJsxStringLiteralTypes,
+  react: generateReactJsxStringLiteralTypes,
+  solid: generateSolidJsxStringLiteralTypes,
   qwik: generateQwikJsxStringLiteralTypes,
   preact: generatePreactJsxStringLiteralTypes,
   vue: generateVueJsxStringLiteralTypes
@@ -2704,7 +2858,7 @@ var csstype_d_ts_default = {
 
 // src/artifacts/generated/system-types.d.ts.json
 var system_types_d_ts_default = {
-  content: "import type { ConditionalValue, Conditions, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport type CssProperties = PropertiesFallback<String | Number> & CssVarProperties\n\nexport type CssKeyframes = {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ntype MinimalNested<P> = {\n  [K in keyof Conditions]?: Nested<P>\n}\n\ntype GenericProperties = {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Nested<SystemProperties & CssVarProperties>\n\nexport type GlobalStyleObject = {\n  [selector: string]: SystemStyleObject\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<{\n  [K in Property]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\n\nexport type JsxStyleProps = SystemProperties &\n  MinimalNested<SystemStyleObject> & {\n    css?: SystemStyleObject\n  }\n\nexport type Assign<T, U> = Omit<T, keyof U> & U\n\nexport type PatchedHTMLProps = {\n  htmlSize?: string | number\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size' | 'content'\n\ntype WithHTMLProps<T> = Omit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
+  content: "import type { ConditionalValue, Conditions, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport type CssProperties = PropertiesFallback<String | Number> & CssVarProperties\n\nexport type CssKeyframes = {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ntype MinimalNested<P> = {\n  [K in keyof Conditions]?: Nested<P>\n}\n\ntype GenericProperties = {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Nested<SystemProperties & CssVarProperties>\n\nexport type GlobalStyleObject = {\n  [selector: string]: SystemStyleObject\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<{\n  [K in Property]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ntype WithCss = { css?: SystemStyleObject }\ntype StyleProps = SystemProperties & MinimalNested<SystemStyleObject>\n\nexport type JsxStyleProps = StyleProps & WithCss\n\nexport type Assign<T, U> = Omit<T, keyof U> & U\n\nexport type PatchedHTMLProps = {\n  htmlSize?: string | number\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size' | 'content'\n\ntype WithHTMLProps<T> = Omit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
 };
 
 // src/artifacts/generated/composition.d.ts.json
@@ -2714,7 +2868,7 @@ var composition_d_ts_default = {
 
 // src/artifacts/generated/recipe.d.ts.json
 var recipe_d_ts_default = {
-  content: "import type { SystemStyleObject } from './system-types'\n\ntype Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never\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]>\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<T extends RecipeVariantFn<RecipeVariantRecord>> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\nexport type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  resolve: (props: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type RecipeCompoundSelection<T extends RecipeVariantRecord> = {\n  [K in keyof T]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SystemStyleObject\n}\n\nexport type RecipeDefinition<T extends RecipeVariantRecord> = {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | RecipeVariantRecord\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?: Array<RecipeCompoundVariant<T>>\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\nexport type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & {\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"
+  content: "import type { SystemStyleObject } from './system-types'\n\ntype Pretty<T> = { [K in keyof T]: T[K] } & {}\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]>\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 type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  resolve: (props: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type RecipeCompoundSelection<T extends RecipeVariantRecord> = {\n  [K in keyof T]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SystemStyleObject\n}\n\nexport type RecipeDefinition<T extends RecipeVariantRecord> = {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | RecipeVariantRecord\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?: Array<RecipeCompoundVariant<T>>\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ntype 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 type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & 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 type SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>> = SlotRecipeVariantFn<S, T> & {\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 extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport type SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> = {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | SlotRecipeVariantRecord<S>\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?: Array<SlotRecipeCompoundVariant<S, T>>\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
 };
 
 // src/artifacts/generated/pattern.d.ts.json
@@ -2733,7 +2887,9 @@ var selectors_d_ts_default = {
 };
 
 // src/artifacts/types/generated.ts
-function getGeneratedTypes() {
+import { match as match9 } from "ts-pattern";
+var jsxStyleProps = "export type JsxStyleProps = StyleProps & WithCss";
+function getGeneratedTypes(ctx) {
   return {
     cssType: csstype_d_ts_default.content,
     recipe: recipe_d_ts_default.content,
@@ -2741,15 +2897,15 @@ function getGeneratedTypes() {
     parts: parts_d_ts_default.content,
     composition: composition_d_ts_default.content,
     selectors: selectors_d_ts_default.content,
-    system: system_types_d_ts_default.content
+    system: match9(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with("minimal", () => system_types_d_ts_default.content.replace(jsxStyleProps, "export type JsxStyleProps = WithCss")).with("none", () => system_types_d_ts_default.content.replace(jsxStyleProps, "export type JsxStyleProps = {}")).exhaustive()
   };
 }
 
 // src/artifacts/types/main.ts
-import { outdent as outdent38 } from "outdent";
+import { outdent as outdent39 } from "outdent";
 var generateTypesEntry = () => ({
-  global: outdent38`
-    import type { RecipeVariantRecord, RecipeConfig } from './recipe'
+  global: outdent39`
+    import type { RecipeVariantRecord, RecipeConfig, SlotRecipeVariantRecord, SlotRecipeConfig } from './recipe'
     import type { Parts } from './parts'
     import type { PatternConfig, PatternProperties } from './pattern'
     import type { GlobalStyleObject, SystemStyleObject } from './system-types'
@@ -2757,27 +2913,28 @@ var generateTypesEntry = () => ({
 
     declare module '@pandacss/dev' {
       export function defineRecipe<V extends RecipeVariantRecord>(config: RecipeConfig<V>): RecipeConfig
+      export function defineSlotRecipe<S extends string, V extends SlotRecipeVariantRecord<S>>(config: SlotRecipeConfig<S, V>): SlotRecipeConfig
       export function defineStyles(definition: SystemStyleObject): SystemStyleObject
       export function defineGlobalStyles(definition: GlobalStyleObject): GlobalStyleObject
       export function defineTextStyles(definition: CompositionStyles['textStyles']): CompositionStyles['textStyles']
       export function defineLayerStyles(definition: CompositionStyles['layerStyles']): CompositionStyles['layerStyles']
       export function definePattern<T extends PatternProperties>(config: PatternConfig<T>): PatternConfig
-      export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>;
+      export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>
     }
     `,
-  index: outdent38`
+  index: outdent39`
     import './global'
     export type { ConditionalValue } from './conditions'
     export type { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
 
     `,
-  helpers: outdent38`
+  helpers: outdent39`
   export type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
   `
 });
 
 // src/artifacts/types/prop-types.ts
-import { outdent as outdent39 } from "outdent";
+import { outdent as outdent40 } from "outdent";
 function generatePropTypes(ctx) {
   const {
     config: { strictTokens },
@@ -2785,7 +2942,7 @@ function generatePropTypes(ctx) {
   } = ctx;
   const strictText = `${strictTokens ? "" : " | CssValue<T>"}`;
   const result = [
-    outdent39`
+    outdent40`
     import type { ConditionalValue } from './conditions';
     import type { CssProperties } from './system-types'
     import type { Tokens } from '../tokens'
@@ -2808,23 +2965,23 @@ function generatePropTypes(ctx) {
     result.push(`	${key}: Shorthand<${JSON.stringify(value)}>;`);
   });
   result.push("}");
-  return outdent39`
+  return outdent40`
   ${result.join("\n")}
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
-    ? ConditionalValue<PropertyTypes[T]${strictText}>
+    ? ConditionalValue<PropertyTypes[T]${strictText} | (string & {})>
     : T extends keyof CssProperties
-    ? ConditionalValue<CssProperties[T]>
+    ? ConditionalValue<CssProperties[T] | (string & {})>
     : ConditionalValue<string | number>
   `;
 }
 
 // src/artifacts/types/style-props.ts
 import { allCssProperties } from "@pandacss/is-valid-prop";
-import outdent40 from "outdent";
+import outdent41 from "outdent";
 function generateStyleProps(ctx) {
-  const props = new Set(allCssProperties.concat(ctx.utility.keys()));
-  return outdent40`
+  const props = new Set(allCssProperties.concat(ctx.utility.keys()).filter(Boolean));
+  return outdent41`
     import type { ConditionalValue } from './conditions'
     import type { PropertyValue } from './prop-type'
     import type { Token } from '../tokens'
@@ -2841,7 +2998,7 @@ function generateStyleProps(ctx) {
 
 // src/artifacts/types/token-types.ts
 import { capitalize, unionType as unionType3 } from "@pandacss/shared";
-import { outdent as outdent41 } from "outdent";
+import { outdent as outdent42 } from "outdent";
 import pluralize from "pluralize";
 var categories = [
   "zIndex",
@@ -2886,12 +3043,12 @@ function generateTokenTypes(ctx) {
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
   set.add(`export type TokenCategory = ${unionType3(categories)}`);
-  return outdent41.string(Array.from(set).join("\n\n"));
+  return outdent42.string(Array.from(set).join("\n\n"));
 }
 
 // src/artifacts/index.ts
 function setupHelpers(ctx) {
-  const code = generateHelpers();
+  const code = generateHelpers(ctx);
   return {
     files: [{ file: ctx.file.ext("helpers"), code: code.js }]
   };
@@ -2919,7 +3076,7 @@ function setupDesignTokens(ctx) {
   };
 }
 function setupTypes(ctx) {
-  const gen = getGeneratedTypes();
+  const gen = getGeneratedTypes(ctx);
   const conditions = generateConditions(ctx);
   const jsx = generateJsxTypes(ctx);
   const entry = generateTypesEntry();
@@ -2967,6 +3124,18 @@ function setupCva(ctx) {
     ]
   };
 }
+function setupSva(ctx) {
+  if (ctx.isTemplateLiteralSyntax)
+    return;
+  const code = generateSvaFn(ctx);
+  return {
+    dir: ctx.paths.css,
+    files: [
+      { file: ctx.file.ext("sva"), code: code.js },
+      { file: "sva.d.ts", code: code.dts }
+    ]
+  };
+}
 function setupCx(ctx) {
   const code = generateCx();
   return {
@@ -2983,8 +3152,8 @@ function setupRecipes(ctx) {
     return;
   const indexFiles = files.filter((file) => !file.name.includes("create-recipe"));
   const index = {
-    js: outdent42.string(indexFiles.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
-    dts: outdent42.string(indexFiles.map((file) => `export * from './${file.name}'`).join("\n"))
+    js: outdent43.string(indexFiles.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
+    dts: outdent43.string(indexFiles.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.recipe,
@@ -3003,8 +3172,8 @@ function setupPatterns(ctx) {
   if (!files)
     return;
   const index = {
-    js: outdent42.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
-    dts: outdent42.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
+    js: outdent43.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
+    dts: outdent43.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
   };
   return {
     dir: ctx.paths.pattern,
@@ -3019,20 +3188,20 @@ function setupPatterns(ctx) {
 function setupJsx(ctx) {
   if (!ctx.jsx.framework)
     return;
-  const isValidProp = generateisValidProp(ctx);
+  const isValidProp = generateIsValidProp(ctx);
   const types = generateJsxTypes(ctx);
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
   const index = {
-    js: outdent42`
+    js: outdent43`
   ${ctx.file.export("./factory")}
   ${isValidProp?.js ? ctx.file.export("./is-valid-prop") : ""}
-  ${outdent42.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
+  ${outdent43.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
   `,
-    dts: outdent42`
+    dts: outdent43`
   export * from './factory'
   ${isValidProp?.dts ? `export * from './is-valid-prop'` : ""}
-  ${outdent42.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  ${outdent43.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
   export type { ${ctx.jsx.typeName} } from '../types/jsx'
     `
   };
@@ -3052,15 +3221,17 @@ function setupJsx(ctx) {
 }
 function setupCssIndex(ctx) {
   const index = {
-    js: outdent42`
+    js: outdent43`
   ${ctx.file.export("./css")}
   ${ctx.file.export("./cx")}
   ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.export("./cva")}
+  ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.export("./sva")}
  `,
-    dts: outdent42`
+    dts: outdent43`
   export * from './css'
   export * from './cx'
   ${ctx.isTemplateLiteralSyntax ? "" : `export * from './cva'`}
+  ${ctx.isTemplateLiteralSyntax ? "" : `export * from './sva'`}
   `
   };
   return {
@@ -3104,6 +3275,7 @@ var generateArtifacts = (ctx) => () => {
     setupKeyframes(ctx),
     setupTypes(ctx),
     setupCva(ctx),
+    setupSva(ctx),
     setupCx(ctx),
     setupCss(ctx),
     setupRecipes(ctx),
@@ -3148,13 +3320,15 @@ var generateFlattenedCss = (ctx) => (options) => {
     ].filter(Boolean).join("\n\n") : unresolved
   });
   sheet.append(...files);
-  return sheet.toCss({ optimize: true, minify });
+  const output = sheet.toCss({ optimize: true, minify });
+  ctx.hooks.callHook("generator:css", "styles.css", output);
+  return output;
 };
 
 // src/artifacts/css/parser-css.ts
 import { logger } from "@pandacss/logger";
 import { pipe, tap, tryCatch } from "lil-fp/func";
-import { P, match as match6 } from "ts-pattern";
+import { P, match as match10 } from "ts-pattern";
 var generateParserCss = (ctx) => (result) => pipe(
   { ...ctx, sheet: ctx.createSheet(), result },
   tap(({ sheet, result: result2, patterns, recipes }) => {
@@ -3168,6 +3342,11 @@ var generateParserCss = (ctx) => (result) => pipe(
         sheet.processAtomicRecipe(data);
       });
     });
+    result2.sva.forEach((sva) => {
+      sva.data.forEach((data) => {
+        sheet.processAtomicSlotRecipe(data);
+      });
+    });
     result2.jsx.forEach((jsx) => {
       jsx.data.forEach((data) => {
         sheet.processStyleProps(data);
@@ -3179,7 +3358,7 @@ var generateParserCss = (ctx) => (result) => pipe(
           const recipeConfig = recipes.getConfig(recipeName);
           if (!recipeConfig)
             continue;
-          match6(recipe).with({ type: "jsx-recipe" }, () => {
+          match10(recipe).with({ type: "jsx-recipe" }, () => {
             recipe.data.forEach((data) => {
               const [recipeProps, styleProps] = recipes.splitProps(recipeName, data);
               sheet.processStyleProps(styleProps);
@@ -3198,7 +3377,7 @@ var generateParserCss = (ctx) => (result) => pipe(
     result2.pattern.forEach((patternSet, name) => {
       try {
         for (const pattern of patternSet) {
-          match6(pattern).with({ type: "jsx-pattern", name: P.string }, ({ name: jsxName }) => {
+          match10(pattern).with({ type: "jsx-pattern", name: P.string }, ({ name: jsxName }) => {
             pattern.data.forEach((data) => {
               const fnName = patterns.getFnName(jsxName);
               const styleProps = patterns.transform(fnName, data);
@@ -3292,11 +3471,13 @@ var getBaseEngine = (conf) => {
     const sheetContext = createSheetContext();
     return new Stylesheet(sheetContext, {
       content: options?.content,
-      recipes: theme?.recipes
+      recipes: theme?.recipes,
+      slotRecipes: theme?.slotRecipes
     });
   };
   const recipeContext = createSheetContext();
-  const recipes = new Recipes(theme?.recipes ?? {}, recipeContext);
+  const recipeConfigs = Object.assign({}, theme.recipes ?? {}, theme.slotRecipes ?? {});
+  const recipes = new Recipes(recipeConfigs, recipeContext);
   recipes.save();
   const properties = Array.from(/* @__PURE__ */ new Set(["css", ...utility.keys(), ...conditions.keys()]));
   const propertyMap = new Map(properties.map((prop) => [prop, true]));
@@ -3327,13 +3508,14 @@ var getBaseEngine = (conf) => {
 // src/engines/jsx.ts
 import { capitalize as capitalize2 } from "@pandacss/shared";
 var getJsxEngine = (config) => {
-  const { jsxFactory, jsxFramework } = config;
+  const { jsxFactory, jsxFramework, jsxStyleProps: jsxStyleProps2 } = config;
   return {
     factoryName: jsxFactory,
     upperName: capitalize2(jsxFactory),
     typeName: `HTML${capitalize2(jsxFactory)}Props`,
     componentName: `${capitalize2(jsxFactory)}Component`,
-    framework: jsxFramework
+    framework: jsxFramework,
+    styleProps: jsxStyleProps2 ?? "all"
   };
 };
 
@@ -3355,12 +3537,8 @@ var getPathEngine = ({ cwd, emitPackage, outdir }) => {
 };
 
 // src/engines/pattern.ts
-import { capitalize as capitalize3, dashCase, mapObject as mapObject2, memo as memo2, uncapitalize } from "@pandacss/shared";
+import { capitalize as capitalize3, dashCase, mapObject as mapObject2, memo as memo2, uncapitalize, createRegex } from "@pandacss/shared";
 var helpers2 = { map: mapObject2 };
-var createRegex = (item) => {
-  const regex = item.map((item2) => typeof item2 === "string" ? item2 : item2.source).join("|");
-  return new RegExp(`^${regex}$`);
-};
 var getPatternEngine = (config) => {
   const patterns = config.patterns ?? {};
   const getNames = (name) => {
@@ -3428,6 +3606,7 @@ var defaults = (conf) => ({
   config: {
     cssVarRoot: ":where(:root, :host)",
     jsxFactory: "styled",
+    jsxStyleProps: "all",
     outExtension: "mjs",
     shorthands: true,
     syntax: "object-literal",
@@ -3457,6 +3636,7 @@ var createGenerator = (conf) => {
       importMap: getImportMap(config.outdir.replace(relativeBaseUrl, "")),
       jsx: {
         factory: jsx.factoryName,
+        styleProps: jsx.styleProps,
         isStyleProp: isValidProperty,
         nodes: [...patterns.details, ...recipes.details]
       },