@pandacss/generator 0.5.1 → 0.7.0

package/dist/index.mjs

@@ -99,7 +99,7 @@ var getMessages = (ctx) => ({
 
 // src/artifacts/index.ts
 import { isObject } from "@pandacss/shared";
-import outdent41 from "outdent";
+import outdent42 from "outdent";
 
 // src/artifacts/css/global-css.ts
 var generateGlobalCss = (ctx) => {
@@ -175,199 +175,197 @@ function generateKeyframeCss(ctx) {
 var css = String.raw;
 function generateResetCss(ctx, scope = "") {
   const selector = scope ? `${scope} ` : "";
-  const output = css`
-    @layer reset {
-      ${selector}* {
-        margin: 0;
-        padding: 0;
-        font: inherit;
-      }
+  const output = css`@layer reset {
+  ${selector}* {
+    margin: 0;
+    padding: 0;
+    font: inherit;
+  }
 
-      ${selector}*,
-      ${selector}*::before,
-      ${selector}*::after {
-        box-sizing: border-box;
-        border-width: 0;
-        border-style: solid;
-        border-color: var(--global-color-border, currentColor);
-      }
+  ${selector}*,
+  ${selector}*::before,
+  ${selector}*::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: var(--global-color-border, currentColor);
+  }
 
-      ${scope || "html"} {
-        line-height: 1.5;
-        --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-          'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-          'Noto Color Emoji';
-        -webkit-text-size-adjust: 100%;
-        -webkit-text-size-adjust: 100%;
-        -webkit-font-smoothing: antialiased;
-        -moz-tab-size: 4;
-        tab-size: 4;
-        font-family: var(--global-font-body, var(--font-fallback));
-      }
+  ${scope || "html"} {
+    line-height: 1.5;
+    --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+      'Noto Color Emoji';
+    -webkit-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-tab-size: 4;
+    tab-size: 4;
+    font-family: var(--global-font-body, var(--font-fallback));
+  }
 
-      ${selector}hr {
-        height: 0;
-        color: inherit;
-        border-top-width: 1px;
-      }
+  ${selector}hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
 
-      body {
-        height: 100%;
-        line-height: inherit;
-      }
+  body {
+    height: 100%;
+    line-height: inherit;
+  }
 
-      ${selector}img {
-        border-style: none;
-      }
+  ${selector}img {
+    border-style: none;
+  }
 
-      ${selector}img,
-      ${selector}svg,
-      ${selector}video,
-      ${selector}canvas,
-      ${selector}audio,
-      ${selector}iframe,
-      ${selector}embed,
-      ${selector}object {
-        display: block;
-        vertical-align: middle;
-      }
+  ${selector}img,
+  ${selector}svg,
+  ${selector}video,
+  ${selector}canvas,
+  ${selector}audio,
+  ${selector}iframe,
+  ${selector}embed,
+  ${selector}object {
+    display: block;
+    vertical-align: middle;
+  }
 
-      ${selector}img,
-      ${selector}video {
-        max-width: 100%;
-        height: auto;
-      }
+  ${selector}img,
+  ${selector}video {
+    max-width: 100%;
+    height: auto;
+  }
 
-      ${selector}p,
-      ${selector}h1,
-      ${selector}h2,
-      ${selector}h3,
-      ${selector}h4,
-      ${selector}h5,
-      ${selector}h6 {
-        overflow-wrap: break-word;
-      }
+  ${selector}p,
+  ${selector}h1,
+  ${selector}h2,
+  ${selector}h3,
+  ${selector}h4,
+  ${selector}h5,
+  ${selector}h6 {
+    overflow-wrap: break-word;
+  }
 
-      ${selector}ol,
-      ${selector}ul {
-        list-style: none;
-      }
+  ${selector}ol,
+  ${selector}ul {
+    list-style: none;
+  }
 
-      ${selector}code,
-      ${selector}kbd,
-      ${selector}pre,
-      ${selector}samp {
-        font-size: 1em;
-      }
+  ${selector}code,
+  ${selector}kbd,
+  ${selector}pre,
+  ${selector}samp {
+    font-size: 1em;
+  }
 
-      ${selector}button,
-      ${selector}[type='button'],
-      ${selector}[type='reset'],
-      ${selector}[type='submit'] {
-        -webkit-appearance: button;
-        background-color: transparent;
-        background-image: none;
-      }
+  ${selector}button,
+  ${selector}[type='button'],
+  ${selector}[type='reset'],
+  ${selector}[type='submit'] {
+    -webkit-appearance: button;
+    background-color: transparent;
+    background-image: none;
+  }
 
-      ${selector}button,
-      ${selector}select {
-        text-transform: none;
-      }
+  ${selector}button,
+  ${selector}select {
+    text-transform: none;
+  }
 
-      ${selector}table {
-        text-indent: 0;
-        border-color: inherit;
-        border-collapse: collapse;
-      }
+  ${selector}table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
 
-      ${selector}input::placeholder,
-      ${selector}textarea::placeholder {
-        opacity: 1;
-        color: var(--global-color-placeholder, #9ca3af);
-      }
+  ${selector}input::placeholder,
+  ${selector}textarea::placeholder {
+    opacity: 1;
+    color: var(--global-color-placeholder, #9ca3af);
+  }
 
-      ${selector}textarea {
-        resize: vertical;
-      }
+  ${selector}textarea {
+    resize: vertical;
+  }
 
-      ${selector}summary {
-        display: list-item;
-      }
+  ${selector}summary {
+    display: list-item;
+  }
 
-      ${selector}small {
-        font-size: 80%;
-      }
+  ${selector}small {
+    font-size: 80%;
+  }
 
-      ${selector}sub,
-      ${selector}sup {
-        font-size: 75%;
-        line-height: 0;
-        position: relative;
-        vertical-align: baseline;
-      }
+  ${selector}sub,
+  ${selector}sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
 
-      ${selector}sub {
-        bottom: -0.25em;
-      }
+  ${selector}sub {
+    bottom: -0.25em;
+  }
 
-      ${selector}sup {
-        top: -0.5em;
-      }
+  ${selector}sup {
+    top: -0.5em;
+  }
 
-      ${selector}dialog {
-        padding: 0;
-      }
+  ${selector}dialog {
+    padding: 0;
+  }
 
-      ${selector}a {
-        color: inherit;
-        text-decoration: inherit;
-      }
+  ${selector}a {
+    color: inherit;
+    text-decoration: inherit;
+  }
 
-      ${selector}abbr:where([title]) {
-        text-decoration: underline dotted;
-      }
+  ${selector}abbr:where([title]) {
+    text-decoration: underline dotted;
+  }
 
-      ${selector}b,
-      ${selector}strong {
-        font-weight: bolder;
-      }
+  ${selector}b,
+  ${selector}strong {
+    font-weight: bolder;
+  }
 
-      ${selector}code,
-      ${selector}kbd,
-      ${selector}samp,
-      ${selector}pre {
-        font-size: 1em;
-        --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New';
-        font-family: var(--global-font-mono, var(--font-fallback));
-      }
+  ${selector}code,
+  ${selector}kbd,
+  ${selector}samp,
+  ${selector}pre {
+    font-size: 1em;
+    --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New';
+    font-family: var(--global-font-mono, var(--font-fallback));
+  }
 
-      ${selector}[type='search'] {
-        -webkit-appearance: textfield;
-        outline-offset: -2px;
-      }
+  ${selector}[type='search'] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+  }
 
-      ${selector}::-webkit-search-decoration {
-        -webkit-appearance: none;
-      }
+  ${selector}::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
 
-      ${selector}::-webkit-file-upload-button {
-        -webkit-appearance: button;
-      }
+  ${selector}::-webkit-file-upload-button {
+    -webkit-appearance: button;
+  }
 
-      ${selector}::-webkit-inner-spin-button,
-      ${selector}::-webkit-outer-spin-button {
-        height: auto;
-      }
+  ${selector}::-webkit-inner-spin-button,
+  ${selector}::-webkit-outer-spin-button {
+    height: auto;
+  }
 
-      ${selector}:-moz-ui-invalid {
-        box-shadow: none;
-      }
+  ${selector}:-moz-ui-invalid {
+    box-shadow: none;
+  }
 
-      ${selector}:-moz-focusring {
-        outline: auto;
-      }
-    }
-  `;
+  ${selector}:-moz-focusring {
+    outline: auto;
+  }
+}`;
   ctx.hooks.callHook("generator:css", "reset.css", output);
   return output;
 }
@@ -381,7 +379,15 @@ var generateStaticCss = (ctx) => {
   const fn = getStaticCss(staticCss);
   const results = fn({
     breakpoints: Object.keys(theme.breakpoints ?? {}),
-    getPropertyKeys: (prop) => utility.getPropertyKeys(prop).filter((key) => !key.startsWith("type:") && !key.startsWith("CssProperties:")),
+    getPropertyKeys: (prop) => {
+      const propConfig = utility.config[prop];
+      if (!propConfig)
+        return [];
+      const values = utility.getPropertyValues(propConfig);
+      if (!values)
+        return [];
+      return Object.keys(values);
+    },
     getRecipeKeys: (recipe) => recipes.details.find((detail) => detail.config.name === recipe)?.variantKeyMap ?? {}
   });
   results.css.forEach((css2) => {
@@ -795,7 +801,7 @@ import { outdent as outdent8 } from "outdent";
 
 // src/artifacts/generated/helpers.mjs.json
 var helpers_mjs_default = {
-  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/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.ts\nvar dashCaseRegex = /[A-Z]/g;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(dashCaseRegex, (match) => `-${match.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/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'
 };
 
 // src/artifacts/js/helpers.ts
@@ -821,6 +827,7 @@ var is_valid_prop_mjs_default = {
 };
 
 // src/artifacts/js/is-valid-prop.ts
+import { outdent as outdent9 } from "outdent";
 function generateisValidProp(ctx) {
   if (ctx.isTemplateLiteralSyntax)
     return;
@@ -830,14 +837,19 @@ function generateisValidProp(ctx) {
     `var userGenerated = [${ctx.properties.map((key) => JSON.stringify(key)).join(",")}]`
   );
   return {
-    js: content
+    js: content,
+    dts: outdent9`
+    declare const isCssProperty: (value: string) => boolean;
+
+    export { isCssProperty };
+    `
   };
 }
 
 // src/artifacts/js/pattern.ts
 import { unionType } from "@pandacss/shared";
 import { stringify as stringify2 } from "javascript-stringify";
-import { outdent as outdent9 } from "outdent";
+import { outdent as outdent10 } from "outdent";
 import { match } from "ts-pattern";
 function generatePattern(ctx) {
   if (ctx.patterns.isEmpty())
@@ -855,7 +867,7 @@ function generatePattern(ctx) {
     }
     return {
       name: dashName,
-      dts: outdent9`
+      dts: outdent10`
       import type { SystemStyleObject, ConditionalValue } from '../types'
       import type { PropertyValue } from '../types/prop-type'
       import type { Properties } from '../types/csstype'
@@ -879,7 +891,7 @@ function generatePattern(ctx) {
       }).join("\n	")}
       }
 
-      ${strict ? outdent9`export declare function ${name}(options: ${upperName}Properties): string` : outdent9`
+      ${strict ? outdent10`export declare function ${name}(options: ${upperName}Properties): string` : outdent10`
 
           type ${upperName}Options = ${upperName}Properties & Omit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}>
 
@@ -888,7 +900,7 @@ function generatePattern(ctx) {
           `}
 
      `,
-      js: outdent9`
+      js: outdent10`
     ${ctx.file.import(helperImports.join(", "), "../helpers")}
     ${ctx.file.import("css", "../css/index")}
 
@@ -905,7 +917,7 @@ transform`)}
 
 // src/artifacts/js/recipe.ts
 import { unionType as unionType2 } from "@pandacss/shared";
-import { outdent as outdent10 } from "outdent";
+import { outdent as outdent11 } from "outdent";
 var stringify3 = (value) => JSON.stringify(value, null, 2);
 var isBooleanValue = (value) => value === "true" || value === "false";
 function generateRecipes(ctx) {
@@ -919,7 +931,7 @@ function generateRecipes(ctx) {
   const createRecipeFn = {
     name: "create-recipe",
     dts: "",
-    js: outdent10`
+    js: outdent11`
    ${ctx.file.import("css", "../css/css")}
    ${ctx.file.import("assertCompoundVariant, getCompoundVariantCss", "../css/cva")}
    ${ctx.file.import("cx", "../css/cx")}
@@ -966,7 +978,7 @@ function generateRecipes(ctx) {
       const { name, description, defaultVariants, compoundVariants } = config;
       return {
         name: dashName,
-        js: outdent10`
+        js: outdent11`
         ${ctx.file.import("splitProps", "../helpers")}
         ${ctx.file.import("createRecipe", "./create-recipe")}
 
@@ -987,7 +999,7 @@ function generateRecipes(ctx) {
           splitVariantProps,
         })
         `,
-        dts: outdent10`
+        dts: outdent11`
         import type { ConditionalValue } from '../types'
         import type { Pretty } from '../types/helpers'
 
@@ -1025,7 +1037,7 @@ function generateRecipes(ctx) {
 }
 
 // src/artifacts/js/token.ts
-import outdent11 from "outdent";
+import outdent12 from "outdent";
 function generateTokenJs(ctx) {
   const { tokens } = ctx;
   const map = /* @__PURE__ */ new Map();
@@ -1036,7 +1048,7 @@ function generateTokenJs(ctx) {
   });
   const obj = Object.fromEntries(map);
   return {
-    js: outdent11`
+    js: outdent12`
   const tokens = ${JSON.stringify(obj, null, 2)}
 
   export function token(path, fallback) {
@@ -1049,7 +1061,7 @@ function generateTokenJs(ctx) {
 
   token.var = tokenVar
   `,
-    dts: outdent11`
+    dts: outdent12`
   import type { Token } from './tokens'
 
   export declare const token: {
@@ -1063,11 +1075,11 @@ function generateTokenJs(ctx) {
 }
 
 // src/artifacts/preact-jsx/jsx.ts
-import { outdent as outdent12 } from "outdent";
+import { outdent as outdent13 } from "outdent";
 function generatePreactJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent12`
+    js: outdent13`
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
     import { useMemo } from 'preact/hooks'
@@ -1134,7 +1146,7 @@ function generatePreactJsxFactory(ctx) {
 }
 
 // src/artifacts/preact-jsx/pattern.ts
-import { outdent as outdent13 } from "outdent";
+import { outdent as outdent14 } from "outdent";
 import { match as match2 } from "ts-pattern";
 function generatePreactJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
@@ -1143,7 +1155,7 @@ function generatePreactJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: outdent13`
+      js: outdent14`
       import { h } from 'preact'
       import { forwardRef } from 'preact/compat'
       ${ctx.file.import(factoryName, "./factory")}
@@ -1152,12 +1164,12 @@ function generatePreactJsxPattern(ctx) {
       export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
         ${match2(props.length).with(
         0,
-        () => outdent13`
+        () => outdent14`
           const styleProps = ${styleFnName}()
           return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
           `
       ).otherwise(
-        () => outdent13`
+        () => outdent14`
           const { ${props.join(", ")}, ...restProps } = props
           const styleProps = ${styleFnName}({${props.join(", ")}})
           return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
@@ -1165,7 +1177,7 @@ function generatePreactJsxPattern(ctx) {
       )}
       })    
       `,
-      dts: outdent13`
+      dts: outdent14`
       import type { FunctionComponent } from 'preact'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
@@ -1180,15 +1192,15 @@ function generatePreactJsxPattern(ctx) {
 }
 
 // src/artifacts/preact-jsx/types.ts
-import { outdent as outdent14 } from "outdent";
+import { outdent as outdent15 } from "outdent";
 function generatePreactJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent14`
+    jsxFactory: outdent15`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent14`
+    jsxType: outdent15`
 import type { ComponentProps, JSX } from 'preact'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1223,11 +1235,11 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
 }
 
 // src/artifacts/preact-jsx/jsx.string-literal.ts
-import { outdent as outdent15 } from "outdent";
+import { outdent as outdent16 } from "outdent";
 function generatePreactJsxStringLiteralFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent15`
+    js: outdent16`
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
     ${ctx.file.import("css, cx", "../css/index")}
@@ -1273,15 +1285,15 @@ function generatePreactJsxStringLiteralFactory(ctx) {
 }
 
 // src/artifacts/preact-jsx/types.string-literal.ts
-import { outdent as outdent16 } from "outdent";
+import { outdent as outdent17 } from "outdent";
 function generatePreactJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent16`
+    jsxFactory: outdent17`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent16`
+    jsxType: outdent17`
 import type { ComponentProps, JSX } from 'preact'
 
 type ElementType = keyof JSX.IntrinsicElements
@@ -1307,11 +1319,11 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/qwik-jsx/jsx.ts
-import { outdent as outdent17 } from "outdent";
+import { outdent as outdent18 } from "outdent";
 function generateQwikJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent17`
+    js: outdent18`
     import { h } from '@builder.io/qwik'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
@@ -1375,7 +1387,7 @@ function generateQwikJsxFactory(ctx) {
 }
 
 // src/artifacts/qwik-jsx/pattern.ts
-import { outdent as outdent18 } from "outdent";
+import { outdent as outdent19 } from "outdent";
 import { match as match3 } from "ts-pattern";
 function generateQwikJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
@@ -1384,7 +1396,7 @@ function generateQwikJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: outdent18`
+      js: outdent19`
       import { h } from '@builder.io/qwik'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
@@ -1392,12 +1404,12 @@ function generateQwikJsxPattern(ctx) {
       export const ${jsxName} = function ${jsxName}(props) {
         ${match3(props.length).with(
         0,
-        () => outdent18`
+        () => outdent19`
         const styleProps = ${styleFnName}()
         return h(${factoryName}.${jsxElement}, { ...styleProps, ...props })
           `
       ).otherwise(
-        () => outdent18`
+        () => outdent19`
         const { ${props.join(", ")}, ...restProps } = props
         const styleProps = ${styleFnName}({${props.join(", ")}})
         return h(${factoryName}.${jsxElement}, { ...styleProps, ...restProps })
@@ -1405,7 +1417,7 @@ function generateQwikJsxPattern(ctx) {
       )}
       }
       `,
-      dts: outdent18`
+      dts: outdent19`
       import type { FunctionComponent } from '@builder.io/qwik'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
@@ -1424,15 +1436,15 @@ function generateQwikJsxPattern(ctx) {
 }
 
 // src/artifacts/qwik-jsx/types.ts
-import { outdent as outdent19 } from "outdent";
+import { outdent as outdent20 } from "outdent";
 function generateQwikJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent19`
+    jsxFactory: outdent20`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent19`
+    jsxType: outdent20`
 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'
@@ -1486,11 +1498,11 @@ export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T>, JsxSt
 }
 
 // src/artifacts/qwik-jsx/jsx.string-literal.ts
-import { outdent as outdent20 } from "outdent";
+import { outdent as outdent21 } from "outdent";
 function generateQwikJsxStringLiteralFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent20`
+    js: outdent21`
     import { h } from '@builder.io/qwik'
     ${ctx.file.import("css, cx", "../css/index")}
     
@@ -1535,15 +1547,15 @@ function generateQwikJsxStringLiteralFactory(ctx) {
 }
 
 // src/artifacts/qwik-jsx/types.string-literal.ts
-import { outdent as outdent21 } from "outdent";
+import { outdent as outdent22 } from "outdent";
 function generateQwikJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent21`
+    jsxFactory: outdent22`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent21`
+    jsxType: outdent22`
 import type { FunctionComponent, QwikIntrinsicElements } from '@builder.io/qwik'
 
 type ElementType = keyof QwikIntrinsicElements | FunctionComponent<any>
@@ -1574,11 +1586,11 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/react-jsx/jsx.ts
-import { outdent as outdent22 } from "outdent";
+import { outdent as outdent23 } from "outdent";
 function generateReactJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent22`
+    js: outdent23`
     import { createElement, forwardRef, useMemo } from 'react'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
@@ -1644,7 +1656,7 @@ function generateReactJsxFactory(ctx) {
 }
 
 // src/artifacts/react-jsx/pattern.ts
-import { outdent as outdent23 } from "outdent";
+import { outdent as outdent24 } from "outdent";
 import { match as match4 } from "ts-pattern";
 function generateReactJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
@@ -1653,7 +1665,7 @@ function generateReactJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: outdent23`
+      js: outdent24`
       import { createElement, forwardRef } from 'react'
       ${ctx.file.import(factoryName, "./factory")}
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
@@ -1661,12 +1673,12 @@ function generateReactJsxPattern(ctx) {
       export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
         ${match4(props.length).with(
         0,
-        () => outdent23`
+        () => outdent24`
         const styleProps = ${styleFnName}()
         return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
           `
       ).otherwise(
-        () => outdent23`
+        () => outdent24`
         const { ${props.join(", ")}, ...restProps } = props
         const styleProps = ${styleFnName}({${props.join(", ")}})
         return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
@@ -1674,7 +1686,7 @@ function generateReactJsxPattern(ctx) {
       )}
       })    
       `,
-      dts: outdent23`
+      dts: outdent24`
       import type { FunctionComponent } from 'react'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
@@ -1689,15 +1701,15 @@ function generateReactJsxPattern(ctx) {
 }
 
 // src/artifacts/react-jsx/types.ts
-import { outdent as outdent24 } from "outdent";
+import { outdent as outdent25 } from "outdent";
 function generateReactJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent24`
+    jsxFactory: outdent25`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent24`
+    jsxType: outdent25`
 import type { ComponentProps, ElementType } from 'react'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1730,11 +1742,11 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
 }
 
 // src/artifacts/react-jsx/jsx.string-literal.ts
-import { outdent as outdent25 } from "outdent";
+import { outdent as outdent26 } from "outdent";
 function generateReactJsxStringLiteralFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
-    js: outdent25`
+    js: outdent26`
     import { createElement, forwardRef } from 'react'
     ${ctx.file.import("css, cx", "../css/index")}
     
@@ -1780,15 +1792,15 @@ function generateReactJsxStringLiteralFactory(ctx) {
 }
 
 // src/artifacts/react-jsx/types.string-literal.ts
-import { outdent as outdent26 } from "outdent";
+import { outdent as outdent27 } from "outdent";
 function generateReactJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent26`
+    jsxFactory: outdent27`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent26`
+    jsxType: outdent27`
 import type { ComponentProps, ElementType } from 'react'
 
 type Dict = Record<string, unknown>
@@ -1812,11 +1824,11 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/solid-jsx/jsx.ts
-import { outdent as outdent27 } from "outdent";
+import { outdent as outdent28 } from "outdent";
 function generateSolidJsxFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
-    js: outdent27`
+    js: outdent28`
     import { Dynamic } from 'solid-js/web'
     import { mergeProps, splitProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
@@ -1893,7 +1905,7 @@ function generateSolidJsxFactory(ctx) {
 }
 
 // src/artifacts/solid-jsx/pattern.ts
-import { outdent as outdent28 } from "outdent";
+import { outdent as outdent29 } from "outdent";
 import { match as match5 } from "ts-pattern";
 function generateSolidJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
@@ -1902,7 +1914,7 @@ function generateSolidJsxPattern(ctx) {
     const { description, jsxElement = "div" } = pattern.config;
     return {
       name: dashName,
-      js: outdent28`
+      js: outdent29`
     import { splitProps, mergeProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
     ${ctx.file.import(factoryName, "./factory")}
@@ -1911,12 +1923,12 @@ function generateSolidJsxPattern(ctx) {
     export function ${jsxName}(props) {
       ${match5(props.length).with(
         0,
-        () => outdent28`
+        () => outdent29`
           const styleProps = ${styleFnName}()
           return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, props))
         `
       ).otherwise(
-        () => outdent28`
+        () => outdent29`
           const [patternProps, restProps] = splitProps(props, [${props.map((v) => JSON.stringify(v)).join(", ")}]);
           const styleProps = ${styleFnName}(patternProps)
           return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, restProps))
@@ -1924,7 +1936,7 @@ function generateSolidJsxPattern(ctx) {
       )}
     }
     `,
-      dts: outdent28`
+      dts: outdent29`
     import { Component } from 'solid-js'
     import { ${upperName}Properties } from '../patterns/${dashName}'
     import { ${typeName} } from '../types/jsx'
@@ -1939,15 +1951,15 @@ function generateSolidJsxPattern(ctx) {
 }
 
 // src/artifacts/solid-jsx/types.ts
-import { outdent as outdent29 } from "outdent";
+import { outdent as outdent30 } from "outdent";
 function generateSolidJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent29`
+    jsxFactory: outdent30`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent29`
+    jsxType: outdent30`
 import type { ComponentProps, Component, JSX } from 'solid-js'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1982,11 +1994,11 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
 }
 
 // src/artifacts/solid-jsx/jsx.string-literal.ts
-import { outdent as outdent30 } from "outdent";
+import { outdent as outdent31 } from "outdent";
 function generateSolidJsxStringLiteralFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
-    js: outdent30`
+    js: outdent31`
 import { mergeProps, splitProps } from 'solid-js'
 import { Dynamic, createComponent } from 'solid-js/web'
 ${ctx.file.import("css, cx", "../css/index")}
@@ -2038,15 +2050,15 @@ export const ${factoryName} = createJsxFactory()
 }
 
 // src/artifacts/solid-jsx/types.string-literal.ts
-import { outdent as outdent31 } from "outdent";
+import { outdent as outdent32 } from "outdent";
 function generateSolidJsxStringLiteralTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent31`
+    jsxFactory: outdent32`
 import type { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent31`
+    jsxType: outdent32`
 import type { Component, ComponentProps, JSX } from 'solid-js'
 
 type Dict = Record<string, unknown>
@@ -2072,11 +2084,11 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 }
 
 // src/artifacts/vue-jsx/jsx.ts
-import { outdent as outdent32 } from "outdent";
+import { outdent as outdent33 } from "outdent";
 function generateVueJsxFactory(ctx) {
   const { factoryName } = ctx.jsx;
   return {
-    js: outdent32`
+    js: outdent33`
     import { defineComponent, h, computed } from 'vue'
     ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
@@ -2150,11 +2162,11 @@ function generateVueJsxFactory(ctx) {
 }
 
 // src/artifacts/vue-jsx/jsx.string-literal.ts
-import { outdent as outdent33 } from "outdent";
+import { outdent as outdent34 } from "outdent";
 function generateVueJsxStringLiteralFactory(ctx) {
   const { factoryName } = ctx.jsx;
   return {
-    js: outdent33`
+    js: outdent34`
     import { defineComponent, h, computed } from 'vue'
     ${ctx.file.import("css, cx", "../css/index")}
     
@@ -2204,7 +2216,7 @@ function generateVueJsxStringLiteralFactory(ctx) {
 }
 
 // src/artifacts/vue-jsx/pattern.ts
-import { outdent as outdent34 } from "outdent";
+import { outdent as outdent35 } from "outdent";
 function generateVueJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -2213,7 +2225,7 @@ function generateVueJsxPattern(ctx) {
     const propList = props.map((v) => JSON.stringify(v)).join(", ");
     return {
       name: dashName,
-      js: outdent34`
+      js: outdent35`
     import { defineComponent, h, computed } from 'vue'
     ${ctx.file.import(factoryName, "./factory")}
     ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
@@ -2231,7 +2243,7 @@ function generateVueJsxPattern(ctx) {
         }
     })
     `,
-      dts: outdent34`
+      dts: outdent35`
     import { FunctionalComponent } from 'vue'
     import { ${upperName}Properties } from '../patterns/${dashName}'
     import { ${typeName} } from '../types/jsx'
@@ -2246,15 +2258,15 @@ function generateVueJsxPattern(ctx) {
 }
 
 // src/artifacts/vue-jsx/types.ts
-import { outdent as outdent35 } from "outdent";
+import { outdent as outdent36 } from "outdent";
 function generateVueJsxTypes(ctx) {
   const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
-    jsxFactory: outdent35`
+    jsxFactory: outdent36`
 import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
-    jsxType: outdent35`
+    jsxType: outdent36`
 import type { Component, FunctionalComponent } from 'vue'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -2411,15 +2423,15 @@ type IntrinsicElement =
 }
 
 // src/artifacts/vue-jsx/types.string-literal.ts
-import { outdent as outdent36 } from "outdent";
+import { outdent as outdent37 } from "outdent";
 function generateVueJsxStringLiteralTypes(ctx) {
   const { factoryName, 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'
 
 type IntrinsicElement =
@@ -2634,22 +2646,27 @@ function generatePackageJson(ctx) {
     exports: {
       "./css": {
         types: "./css/index.d.ts",
+        require: "./css/index.mjs",
         import: "./css/index.mjs"
       },
       "./jsx": {
         types: "./jsx/index.d.ts",
+        require: "./jsx/index.mjs",
         import: "./jsx/index.mjs"
       },
       "./patterns": {
         types: "./patterns/index.d.ts",
+        require: "./patterns/index.mjs",
         import: "./patterns/index.mjs"
       },
       "./recipes": {
         types: "./recipes/index.d.ts",
+        require: "./recipes/index.mjs",
         import: "./recipes/index.mjs"
       },
       "./tokens": {
         types: "./tokens/index.d.ts",
+        require: "./tokens/index.mjs",
         import: "./tokens/index.mjs"
       },
       "./types": {
@@ -2678,12 +2695,12 @@ 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>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<Omit<Props, keyof RecipeVariantRecord>>]\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  name: 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> = 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  name: 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"
 };
 
 // src/artifacts/generated/pattern.d.ts.json
 var pattern_d_ts_default = {
-  content: "import type { CssProperty, SystemStyleObject } from './system-types'\nimport type { TokenCategory } from '../tokens'\n\ntype Primitive = string | number | boolean | null | undefined\ntype LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)\n\nexport type PatternProperty =\n  | { type: 'property'; value: CssProperty }\n  | { type: 'enum'; value: string[] }\n  | { type: 'token'; value: TokenCategory; property?: CssProperty }\n  | { type: 'string' | 'boolean' | 'number' }\n\nexport type PatternHelpers = {\n  map: (value: any, fn: (value: string) => string | undefined) => any\n}\n\ntype PatternProperties = Record<string, PatternProperty>\n\ntype Props<T> = Record<LiteralUnion<keyof T>, any>\n\nexport type PatternConfig<T extends PatternProperties = PatternProperties> = {\n  /**\n   * The description of the pattern. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The JSX element rendered by the pattern\n   * @default 'div'\n   */\n  jsxElement?: string\n  /**\n   * The properties of the pattern.\n   */\n  properties?: T\n  /**\n   * The css object this pattern will generate.\n   */\n  transform?: (props: Props<T>, helpers: PatternHelpers) => SystemStyleObject\n  /**\n   * The jsx element name this pattern will generate.\n   */\n  jsx?: string\n  /**\n   * Whether to only generate types for the specified properties.\n   * This will disallow css properties\n   */\n  strict?: boolean\n  /**\n   * @experimental\n   * Disallow certain css properties for this pattern\n   */\n  blocklist?: LiteralUnion<CssProperty>[]\n}\n"
+  content: "import type { CssProperty, SystemStyleObject } from './system-types'\nimport type { TokenCategory } from '../tokens'\n\ntype Primitive = string | number | boolean | null | undefined\ntype LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)\n\nexport type PatternProperty =\n  | { type: 'property'; value: CssProperty }\n  | { type: 'enum'; value: string[] }\n  | { type: 'token'; value: TokenCategory; property?: CssProperty }\n  | { type: 'string' | 'boolean' | 'number' }\n\nexport type PatternHelpers = {\n  map: (value: any, fn: (value: string) => string | undefined) => any\n}\n\nexport type PatternProperties = Record<string, PatternProperty>\n\ntype Props<T> = Record<LiteralUnion<keyof T>, any>\n\nexport type PatternConfig<T extends PatternProperties = PatternProperties> = {\n  /**\n   * The description of the pattern. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The JSX element rendered by the pattern\n   * @default 'div'\n   */\n  jsxElement?: string\n  /**\n   * The properties of the pattern.\n   */\n  properties?: T\n  /**\n   * The css object this pattern will generate.\n   */\n  transform?: (props: Props<T>, helpers: PatternHelpers) => SystemStyleObject\n  /**\n   * The jsx element name this pattern will generate.\n   */\n  jsx?: string\n  /**\n   * Whether to only generate types for the specified properties.\n   * This will disallow css properties\n   */\n  strict?: boolean\n  /**\n   * @experimental\n   * Disallow certain css properties for this pattern\n   */\n  blocklist?: LiteralUnion<CssProperty>[]\n}\n"
 };
 
 // src/artifacts/generated/parts.d.ts.json
@@ -2710,12 +2727,12 @@ function getGeneratedTypes() {
 }
 
 // src/artifacts/types/main.ts
-import { outdent as outdent37 } from "outdent";
+import { outdent as outdent38 } from "outdent";
 var generateTypesEntry = () => ({
-  global: outdent37`
+  global: outdent38`
     import type { RecipeVariantRecord, RecipeConfig } from './recipe'
     import type { Parts } from './parts'
-    import type { PatternConfig } from './pattern'
+    import type { PatternConfig, PatternProperties } from './pattern'
     import type { GlobalStyleObject, SystemStyleObject } from './system-types'
     import type { CompositionStyles } from './composition'
 
@@ -2725,23 +2742,23 @@ var generateTypesEntry = () => ({
       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>(config: PatternConfig<T>): PatternConfig
+      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>>;
     }
     `,
-  index: outdent37`
+  index: outdent38`
     import './global'
     export type { ConditionalValue } from './conditions'
     export type { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
 
     `,
-  helpers: outdent37`
+  helpers: outdent38`
   export type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
   `
 });
 
 // src/artifacts/types/prop-types.ts
-import { outdent as outdent38 } from "outdent";
+import { outdent as outdent39 } from "outdent";
 function generatePropTypes(ctx) {
   const {
     config: { strictTokens },
@@ -2749,7 +2766,7 @@ function generatePropTypes(ctx) {
   } = ctx;
   const strictText = `${strictTokens ? "" : " | CssValue<T>"}`;
   const result = [
-    outdent38`
+    outdent39`
     import type { ConditionalValue } from './conditions';
     import type { CssProperties } from './system-types'
     import type { Tokens } from '../tokens'
@@ -2772,7 +2789,7 @@ function generatePropTypes(ctx) {
     result.push(`	${key}: Shorthand<${JSON.stringify(value)}>;`);
   });
   result.push("}");
-  return outdent38`
+  return outdent39`
   ${result.join("\n")}
 
   export type PropertyValue<T extends string> = T extends keyof PropertyTypes
@@ -2785,10 +2802,10 @@ function generatePropTypes(ctx) {
 
 // src/artifacts/types/style-props.ts
 import { allCssProperties } from "@pandacss/is-valid-prop";
-import outdent39 from "outdent";
+import outdent40 from "outdent";
 function generateStyleProps(ctx) {
   const props = new Set(allCssProperties.concat(ctx.utility.keys()));
-  return outdent39`
+  return outdent40`
     import type { ConditionalValue } from './conditions'
     import type { PropertyValue } from './prop-type'
     import type { Token } from '../tokens'
@@ -2805,7 +2822,7 @@ function generateStyleProps(ctx) {
 
 // src/artifacts/types/token-types.ts
 import { capitalize, unionType as unionType3 } from "@pandacss/shared";
-import { outdent as outdent40 } from "outdent";
+import { outdent as outdent41 } from "outdent";
 import pluralize from "pluralize";
 var categories = [
   "zIndex",
@@ -2850,7 +2867,7 @@ function generateTokenTypes(ctx) {
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
   set.add(`export type TokenCategory = ${unionType3(categories)}`);
-  return outdent40.string(Array.from(set).join("\n\n"));
+  return outdent41.string(Array.from(set).join("\n\n"));
 }
 
 // src/artifacts/index.ts
@@ -2947,8 +2964,8 @@ function setupRecipes(ctx) {
     return;
   const indexFiles = files.filter((file) => !file.name.includes("create-recipe"));
   const index = {
-    js: outdent41.string(indexFiles.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
-    dts: outdent41.string(indexFiles.map((file) => `export * from './${file.name}'`).join("\n"))
+    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"))
   };
   return {
     dir: ctx.paths.recipe,
@@ -2967,8 +2984,8 @@ function setupPatterns(ctx) {
   if (!files)
     return;
   const index = {
-    js: outdent41.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
-    dts: outdent41.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
+    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"))
   };
   return {
     dir: ctx.paths.pattern,
@@ -2988,13 +3005,15 @@ function setupJsx(ctx) {
   const factory = generateJsxFactory(ctx);
   const patterns = generateJsxPatterns(ctx);
   const index = {
-    js: outdent41`
+    js: outdent42`
   ${ctx.file.export("./factory")}
-  ${outdent41.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
+  ${isValidProp?.js ? ctx.file.export("./is-valid-prop") : ""}
+  ${outdent42.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
   `,
-    dts: outdent41`
+    dts: outdent42`
   export * from './factory'
-  ${outdent41.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
+  ${isValidProp?.dts ? `export * from './is-valid-prop'` : ""}
+  ${outdent42.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
   export type { ${ctx.jsx.typeName} } from '../types/jsx'
     `
   };
@@ -3004,6 +3023,7 @@ function setupJsx(ctx) {
       ...patterns.map((file) => ({ file: ctx.file.ext(file.name), code: file.js })),
       ...patterns.map((file) => ({ file: `${file.name}.d.ts`, code: file.dts })),
       { file: ctx.file.ext("is-valid-prop"), code: isValidProp?.js },
+      { file: "is-valid-prop.d.ts", code: isValidProp?.dts },
       { file: "factory.d.ts", code: types.jsxFactory },
       { file: ctx.file.ext("factory"), code: factory?.js },
       { file: "index.d.ts", code: index.dts },
@@ -3013,12 +3033,12 @@ function setupJsx(ctx) {
 }
 function setupCssIndex(ctx) {
   const index = {
-    js: outdent41`
+    js: outdent42`
   ${ctx.file.export("./css")}
   ${ctx.file.export("./cx")}
   ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.export("./cva")}
  `,
-    dts: outdent41`
+    dts: outdent42`
   export * from './css'
   export * from './cx'
   ${ctx.isTemplateLiteralSyntax ? "" : `export * from './cva'`}
@@ -3115,8 +3135,7 @@ var generateFlattenedCss = (ctx) => (options) => {
 // src/artifacts/css/parser-css.ts
 import { logger } from "@pandacss/logger";
 import { pipe, tap, tryCatch } from "lil-fp/func";
-import { match as match6, P } from "ts-pattern";
-var flattenStyles = (data) => Object.assign({}, data, { css: void 0 }, data.css ?? {});
+import { P, match as match6 } from "ts-pattern";
 var generateParserCss = (ctx) => (result) => pipe(
   { ...ctx, sheet: ctx.createSheet(), result },
   tap(({ sheet, result: result2, patterns, recipes }) => {
@@ -3132,7 +3151,7 @@ var generateParserCss = (ctx) => (result) => pipe(
     });
     result2.jsx.forEach((jsx) => {
       jsx.data.forEach((data) => {
-        sheet.processAtomic(flattenStyles(data));
+        sheet.processStyleProps(data);
       });
     });
     result2.recipe.forEach((recipeSet, name) => {
@@ -3143,8 +3162,8 @@ var generateParserCss = (ctx) => (result) => pipe(
             continue;
           match6(recipe).with({ type: "jsx-recipe", name: P.string }, ({ name: name2 }) => {
             recipe.data.forEach((data) => {
-              const [recipeProps, styleProps] = recipes.splitProps(name2, flattenStyles(data));
-              sheet.processAtomic(styleProps);
+              const [recipeProps, styleProps] = recipes.splitProps(name2, data);
+              sheet.processStyleProps(styleProps);
               sheet.processRecipe(recipeConfig, recipeProps);
             });
           }).otherwise(() => {
@@ -3163,8 +3182,8 @@ var generateParserCss = (ctx) => (result) => pipe(
           match6(pattern).with({ type: "jsx-pattern", name: P.string }, ({ name: name2 }) => {
             pattern.data.forEach((data) => {
               const fnName = patterns.getFnName(name2);
-              const styleProps = patterns.transform(fnName, flattenStyles(data));
-              sheet.processAtomic(styleProps);
+              const styleProps = patterns.transform(fnName, data);
+              sheet.processStyleProps(styleProps);
             });
           }).otherwise(() => {
             pattern.data.forEach((data) => {
@@ -3423,8 +3442,7 @@ var createGenerator = (conf) => {
         isStyleProp: isValidProperty,
         nodes: [...patterns.nodes, ...recipes.nodes]
       },
-      getRecipeName: recipes.getFnName,
-      getRecipeByName: recipes.getConfig
+      getRecipesByJsxName: recipes.filter
     }
   };
 };