@pandacss/generator 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -73,7 +73,7 @@ var artifactsGenerated = (ctx) => {
73
73
  ${tick} ${(0, import_logger.quote)(outdir, "/recipes")}: functions to create multi-variant styles
74
74
  `,
75
75
  jsx.framework && import_outdent.outdent`
76
- ${tick} ${(0, import_logger.quote)(outdir, "/jsx")}: style prop powered elements for ${jsx.framework}
76
+ ${tick} ${(0, import_logger.quote)(outdir, "/jsx")}: styled jsx elements for ${jsx.framework}
77
77
  `,
78
78
  "\n"
79
79
  ].filter(Boolean).join("\n");
@@ -128,12 +128,9 @@ var getMessages = (ctx) => ({
128
128
  configWatch
129
129
  });
130
130
 
131
- // src/generator.ts
132
- var import_lil_fp3 = require("lil-fp");
133
-
134
131
  // src/artifacts/index.ts
135
132
  var import_shared4 = require("@pandacss/shared");
136
- var import_outdent41 = __toESM(require("outdent"));
133
+ var import_outdent42 = __toESM(require("outdent"));
137
134
 
138
135
  // src/artifacts/css/global-css.ts
139
136
  var generateGlobalCss = (ctx) => {
@@ -209,199 +206,197 @@ function generateKeyframeCss(ctx) {
209
206
  var css = String.raw;
210
207
  function generateResetCss(ctx, scope = "") {
211
208
  const selector = scope ? `${scope} ` : "";
212
- const output = css`
213
- @layer reset {
214
- ${selector}* {
215
- margin: 0;
216
- padding: 0;
217
- font: inherit;
218
- }
209
+ const output = css`@layer reset {
210
+ ${selector}* {
211
+ margin: 0;
212
+ padding: 0;
213
+ font: inherit;
214
+ }
219
215
 
220
- ${selector}*,
221
- ${selector}*::before,
222
- ${selector}*::after {
223
- box-sizing: border-box;
224
- border-width: 0;
225
- border-style: solid;
226
- border-color: var(--global-color-border, currentColor);
227
- }
216
+ ${selector}*,
217
+ ${selector}*::before,
218
+ ${selector}*::after {
219
+ box-sizing: border-box;
220
+ border-width: 0;
221
+ border-style: solid;
222
+ border-color: var(--global-color-border, currentColor);
223
+ }
228
224
 
229
- ${scope || "html"} {
230
- line-height: 1.5;
231
- --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
232
- 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
233
- 'Noto Color Emoji';
234
- -webkit-text-size-adjust: 100%;
235
- -webkit-text-size-adjust: 100%;
236
- -webkit-font-smoothing: antialiased;
237
- -moz-tab-size: 4;
238
- tab-size: 4;
239
- font-family: var(--global-font-body, var(--font-fallback));
240
- }
225
+ ${scope || "html"} {
226
+ line-height: 1.5;
227
+ --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
228
+ 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
229
+ 'Noto Color Emoji';
230
+ -webkit-text-size-adjust: 100%;
231
+ -webkit-text-size-adjust: 100%;
232
+ -webkit-font-smoothing: antialiased;
233
+ -moz-tab-size: 4;
234
+ tab-size: 4;
235
+ font-family: var(--global-font-body, var(--font-fallback));
236
+ }
241
237
 
242
- ${selector}hr {
243
- height: 0;
244
- color: inherit;
245
- border-top-width: 1px;
246
- }
238
+ ${selector}hr {
239
+ height: 0;
240
+ color: inherit;
241
+ border-top-width: 1px;
242
+ }
247
243
 
248
- body {
249
- height: 100%;
250
- line-height: inherit;
251
- }
244
+ body {
245
+ height: 100%;
246
+ line-height: inherit;
247
+ }
252
248
 
253
- ${selector}img {
254
- border-style: none;
255
- }
249
+ ${selector}img {
250
+ border-style: none;
251
+ }
256
252
 
257
- ${selector}img,
258
- ${selector}svg,
259
- ${selector}video,
260
- ${selector}canvas,
261
- ${selector}audio,
262
- ${selector}iframe,
263
- ${selector}embed,
264
- ${selector}object {
265
- display: block;
266
- vertical-align: middle;
267
- }
253
+ ${selector}img,
254
+ ${selector}svg,
255
+ ${selector}video,
256
+ ${selector}canvas,
257
+ ${selector}audio,
258
+ ${selector}iframe,
259
+ ${selector}embed,
260
+ ${selector}object {
261
+ display: block;
262
+ vertical-align: middle;
263
+ }
268
264
 
269
- ${selector}img,
270
- ${selector}video {
271
- max-width: 100%;
272
- height: auto;
273
- }
265
+ ${selector}img,
266
+ ${selector}video {
267
+ max-width: 100%;
268
+ height: auto;
269
+ }
274
270
 
275
- ${selector}p,
276
- ${selector}h1,
277
- ${selector}h2,
278
- ${selector}h3,
279
- ${selector}h4,
280
- ${selector}h5,
281
- ${selector}h6 {
282
- overflow-wrap: break-word;
283
- }
271
+ ${selector}p,
272
+ ${selector}h1,
273
+ ${selector}h2,
274
+ ${selector}h3,
275
+ ${selector}h4,
276
+ ${selector}h5,
277
+ ${selector}h6 {
278
+ overflow-wrap: break-word;
279
+ }
284
280
 
285
- ${selector}ol,
286
- ${selector}ul {
287
- list-style: none;
288
- }
281
+ ${selector}ol,
282
+ ${selector}ul {
283
+ list-style: none;
284
+ }
289
285
 
290
- ${selector}code,
291
- ${selector}kbd,
292
- ${selector}pre,
293
- ${selector}samp {
294
- font-size: 1em;
295
- }
286
+ ${selector}code,
287
+ ${selector}kbd,
288
+ ${selector}pre,
289
+ ${selector}samp {
290
+ font-size: 1em;
291
+ }
296
292
 
297
- ${selector}button,
298
- ${selector}[type='button'],
299
- ${selector}[type='reset'],
300
- ${selector}[type='submit'] {
301
- -webkit-appearance: button;
302
- background-color: transparent;
303
- background-image: none;
304
- }
293
+ ${selector}button,
294
+ ${selector}[type='button'],
295
+ ${selector}[type='reset'],
296
+ ${selector}[type='submit'] {
297
+ -webkit-appearance: button;
298
+ background-color: transparent;
299
+ background-image: none;
300
+ }
305
301
 
306
- ${selector}button,
307
- ${selector}select {
308
- text-transform: none;
309
- }
302
+ ${selector}button,
303
+ ${selector}select {
304
+ text-transform: none;
305
+ }
310
306
 
311
- ${selector}table {
312
- text-indent: 0;
313
- border-color: inherit;
314
- border-collapse: collapse;
315
- }
307
+ ${selector}table {
308
+ text-indent: 0;
309
+ border-color: inherit;
310
+ border-collapse: collapse;
311
+ }
316
312
 
317
- ${selector}input::placeholder,
318
- ${selector}textarea::placeholder {
319
- opacity: 1;
320
- color: var(--global-color-placeholder, #9ca3af);
321
- }
313
+ ${selector}input::placeholder,
314
+ ${selector}textarea::placeholder {
315
+ opacity: 1;
316
+ color: var(--global-color-placeholder, #9ca3af);
317
+ }
322
318
 
323
- ${selector}textarea {
324
- resize: vertical;
325
- }
319
+ ${selector}textarea {
320
+ resize: vertical;
321
+ }
326
322
 
327
- ${selector}summary {
328
- display: list-item;
329
- }
323
+ ${selector}summary {
324
+ display: list-item;
325
+ }
330
326
 
331
- ${selector}small {
332
- font-size: 80%;
333
- }
327
+ ${selector}small {
328
+ font-size: 80%;
329
+ }
334
330
 
335
- ${selector}sub,
336
- ${selector}sup {
337
- font-size: 75%;
338
- line-height: 0;
339
- position: relative;
340
- vertical-align: baseline;
341
- }
331
+ ${selector}sub,
332
+ ${selector}sup {
333
+ font-size: 75%;
334
+ line-height: 0;
335
+ position: relative;
336
+ vertical-align: baseline;
337
+ }
342
338
 
343
- ${selector}sub {
344
- bottom: -0.25em;
345
- }
339
+ ${selector}sub {
340
+ bottom: -0.25em;
341
+ }
346
342
 
347
- ${selector}sup {
348
- top: -0.5em;
349
- }
343
+ ${selector}sup {
344
+ top: -0.5em;
345
+ }
350
346
 
351
- ${selector}dialog {
352
- padding: 0;
353
- }
347
+ ${selector}dialog {
348
+ padding: 0;
349
+ }
354
350
 
355
- ${selector}a {
356
- color: inherit;
357
- text-decoration: inherit;
358
- }
351
+ ${selector}a {
352
+ color: inherit;
353
+ text-decoration: inherit;
354
+ }
359
355
 
360
- ${selector}abbr:where([title]) {
361
- text-decoration: underline dotted;
362
- }
356
+ ${selector}abbr:where([title]) {
357
+ text-decoration: underline dotted;
358
+ }
363
359
 
364
- ${selector}b,
365
- ${selector}strong {
366
- font-weight: bolder;
367
- }
360
+ ${selector}b,
361
+ ${selector}strong {
362
+ font-weight: bolder;
363
+ }
368
364
 
369
- ${selector}code,
370
- ${selector}kbd,
371
- ${selector}samp,
372
- ${selector}pre {
373
- font-size: 1em;
374
- --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New';
375
- font-family: var(--global-font-mono, var(--font-fallback));
376
- }
365
+ ${selector}code,
366
+ ${selector}kbd,
367
+ ${selector}samp,
368
+ ${selector}pre {
369
+ font-size: 1em;
370
+ --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New';
371
+ font-family: var(--global-font-mono, var(--font-fallback));
372
+ }
377
373
 
378
- ${selector}[type='search'] {
379
- -webkit-appearance: textfield;
380
- outline-offset: -2px;
381
- }
374
+ ${selector}[type='search'] {
375
+ -webkit-appearance: textfield;
376
+ outline-offset: -2px;
377
+ }
382
378
 
383
- ${selector}::-webkit-search-decoration {
384
- -webkit-appearance: none;
385
- }
379
+ ${selector}::-webkit-search-decoration {
380
+ -webkit-appearance: none;
381
+ }
386
382
 
387
- ${selector}::-webkit-file-upload-button {
388
- -webkit-appearance: button;
389
- }
383
+ ${selector}::-webkit-file-upload-button {
384
+ -webkit-appearance: button;
385
+ }
390
386
 
391
- ${selector}::-webkit-inner-spin-button,
392
- ${selector}::-webkit-outer-spin-button {
393
- height: auto;
394
- }
387
+ ${selector}::-webkit-inner-spin-button,
388
+ ${selector}::-webkit-outer-spin-button {
389
+ height: auto;
390
+ }
395
391
 
396
- ${selector}:-moz-ui-invalid {
397
- box-shadow: none;
398
- }
392
+ ${selector}:-moz-ui-invalid {
393
+ box-shadow: none;
394
+ }
399
395
 
400
- ${selector}:-moz-focusring {
401
- outline: auto;
402
- }
403
- }
404
- `;
396
+ ${selector}:-moz-focusring {
397
+ outline: auto;
398
+ }
399
+ }`;
405
400
  ctx.hooks.callHook("generator:css", "reset.css", output);
406
401
  return output;
407
402
  }
@@ -415,7 +410,15 @@ var generateStaticCss = (ctx) => {
415
410
  const fn = (0, import_core2.getStaticCss)(staticCss);
416
411
  const results = fn({
417
412
  breakpoints: Object.keys(theme.breakpoints ?? {}),
418
- getPropertyKeys: utility.getPropertyKeys,
413
+ getPropertyKeys: (prop) => {
414
+ const propConfig = utility.config[prop];
415
+ if (!propConfig)
416
+ return [];
417
+ const values = utility.getPropertyValues(propConfig);
418
+ if (!values)
419
+ return [];
420
+ return Object.keys(values);
421
+ },
419
422
  getRecipeKeys: (recipe) => recipes.details.find((detail) => detail.config.name === recipe)?.variantKeyMap ?? {}
420
423
  });
421
424
  results.css.forEach((css2) => {
@@ -750,7 +753,7 @@ function generateCvaFn(ctx) {
750
753
 
751
754
  return Object.assign(cvaFn, {
752
755
  __cva__: true,
753
- variants: variantMap,
756
+ variantMap,
754
757
  variantKeys,
755
758
  resolve,
756
759
  config,
@@ -829,7 +832,7 @@ var import_outdent8 = require("outdent");
829
832
 
830
833
  // src/artifacts/generated/helpers.mjs.json
831
834
  var helpers_mjs_default = {
832
- 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\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 result[key] = inner(child, childPath);\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'
835
+ 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'
833
836
  };
834
837
 
835
838
  // src/artifacts/js/helpers.ts
@@ -855,6 +858,7 @@ var is_valid_prop_mjs_default = {
855
858
  };
856
859
 
857
860
  // src/artifacts/js/is-valid-prop.ts
861
+ var import_outdent9 = require("outdent");
858
862
  function generateisValidProp(ctx) {
859
863
  if (ctx.isTemplateLiteralSyntax)
860
864
  return;
@@ -864,14 +868,19 @@ function generateisValidProp(ctx) {
864
868
  `var userGenerated = [${ctx.properties.map((key) => JSON.stringify(key)).join(",")}]`
865
869
  );
866
870
  return {
867
- js: content
871
+ js: content,
872
+ dts: import_outdent9.outdent`
873
+ declare const isCssProperty: (value: string) => boolean;
874
+
875
+ export { isCssProperty };
876
+ `
868
877
  };
869
878
  }
870
879
 
871
880
  // src/artifacts/js/pattern.ts
872
881
  var import_shared = require("@pandacss/shared");
873
882
  var import_javascript_stringify = require("javascript-stringify");
874
- var import_outdent9 = require("outdent");
883
+ var import_outdent10 = require("outdent");
875
884
  var import_ts_pattern = require("ts-pattern");
876
885
  function generatePattern(ctx) {
877
886
  if (ctx.patterns.isEmpty())
@@ -889,7 +898,7 @@ function generatePattern(ctx) {
889
898
  }
890
899
  return {
891
900
  name: dashName,
892
- dts: import_outdent9.outdent`
901
+ dts: import_outdent10.outdent`
893
902
  import type { SystemStyleObject, ConditionalValue } from '../types'
894
903
  import type { PropertyValue } from '../types/prop-type'
895
904
  import type { Properties } from '../types/csstype'
@@ -913,7 +922,7 @@ function generatePattern(ctx) {
913
922
  }).join("\n ")}
914
923
  }
915
924
 
916
- ${strict ? import_outdent9.outdent`export declare function ${name}(options: ${upperName}Properties): string` : import_outdent9.outdent`
925
+ ${strict ? import_outdent10.outdent`export declare function ${name}(options: ${upperName}Properties): string` : import_outdent10.outdent`
917
926
 
918
927
  type ${upperName}Options = ${upperName}Properties & Omit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}>
919
928
 
@@ -922,7 +931,7 @@ function generatePattern(ctx) {
922
931
  `}
923
932
 
924
933
  `,
925
- js: import_outdent9.outdent`
934
+ js: import_outdent10.outdent`
926
935
  ${ctx.file.import(helperImports.join(", "), "../helpers")}
927
936
  ${ctx.file.import("css", "../css/index")}
928
937
 
@@ -939,7 +948,7 @@ transform`)}
939
948
 
940
949
  // src/artifacts/js/recipe.ts
941
950
  var import_shared2 = require("@pandacss/shared");
942
- var import_outdent10 = require("outdent");
951
+ var import_outdent11 = require("outdent");
943
952
  var stringify3 = (value) => JSON.stringify(value, null, 2);
944
953
  var isBooleanValue = (value) => value === "true" || value === "false";
945
954
  function generateRecipes(ctx) {
@@ -953,7 +962,7 @@ function generateRecipes(ctx) {
953
962
  const createRecipeFn = {
954
963
  name: "create-recipe",
955
964
  dts: "",
956
- js: import_outdent10.outdent`
965
+ js: import_outdent11.outdent`
957
966
  ${ctx.file.import("css", "../css/css")}
958
967
  ${ctx.file.import("assertCompoundVariant, getCompoundVariantCss", "../css/cva")}
959
968
  ${ctx.file.import("cx", "../css/cx")}
@@ -1000,7 +1009,7 @@ function generateRecipes(ctx) {
1000
1009
  const { name, description, defaultVariants, compoundVariants } = config;
1001
1010
  return {
1002
1011
  name: dashName,
1003
- js: import_outdent10.outdent`
1012
+ js: import_outdent11.outdent`
1004
1013
  ${ctx.file.import("splitProps", "../helpers")}
1005
1014
  ${ctx.file.import("createRecipe", "./create-recipe")}
1006
1015
 
@@ -1021,7 +1030,7 @@ function generateRecipes(ctx) {
1021
1030
  splitVariantProps,
1022
1031
  })
1023
1032
  `,
1024
- dts: import_outdent10.outdent`
1033
+ dts: import_outdent11.outdent`
1025
1034
  import type { ConditionalValue } from '../types'
1026
1035
  import type { Pretty } from '../types/helpers'
1027
1036
 
@@ -1059,7 +1068,7 @@ function generateRecipes(ctx) {
1059
1068
  }
1060
1069
 
1061
1070
  // src/artifacts/js/token.ts
1062
- var import_outdent11 = __toESM(require("outdent"));
1071
+ var import_outdent12 = __toESM(require("outdent"));
1063
1072
  function generateTokenJs(ctx) {
1064
1073
  const { tokens } = ctx;
1065
1074
  const map = /* @__PURE__ */ new Map();
@@ -1070,7 +1079,7 @@ function generateTokenJs(ctx) {
1070
1079
  });
1071
1080
  const obj = Object.fromEntries(map);
1072
1081
  return {
1073
- js: import_outdent11.default`
1082
+ js: import_outdent12.default`
1074
1083
  const tokens = ${JSON.stringify(obj, null, 2)}
1075
1084
 
1076
1085
  export function token(path, fallback) {
@@ -1083,7 +1092,7 @@ function generateTokenJs(ctx) {
1083
1092
 
1084
1093
  token.var = tokenVar
1085
1094
  `,
1086
- dts: import_outdent11.default`
1095
+ dts: import_outdent12.default`
1087
1096
  import type { Token } from './tokens'
1088
1097
 
1089
1098
  export declare const token: {
@@ -1097,11 +1106,11 @@ function generateTokenJs(ctx) {
1097
1106
  }
1098
1107
 
1099
1108
  // src/artifacts/preact-jsx/jsx.ts
1100
- var import_outdent12 = require("outdent");
1109
+ var import_outdent13 = require("outdent");
1101
1110
  function generatePreactJsxFactory(ctx) {
1102
1111
  const { factoryName, componentName } = ctx.jsx;
1103
1112
  return {
1104
- js: import_outdent12.outdent`
1113
+ js: import_outdent13.outdent`
1105
1114
  import { h } from 'preact'
1106
1115
  import { forwardRef } from 'preact/compat'
1107
1116
  import { useMemo } from 'preact/hooks'
@@ -1168,7 +1177,7 @@ function generatePreactJsxFactory(ctx) {
1168
1177
  }
1169
1178
 
1170
1179
  // src/artifacts/preact-jsx/pattern.ts
1171
- var import_outdent13 = require("outdent");
1180
+ var import_outdent14 = require("outdent");
1172
1181
  var import_ts_pattern2 = require("ts-pattern");
1173
1182
  function generatePreactJsxPattern(ctx) {
1174
1183
  const { typeName, factoryName } = ctx.jsx;
@@ -1177,7 +1186,7 @@ function generatePreactJsxPattern(ctx) {
1177
1186
  const { description, jsxElement = "div" } = pattern.config;
1178
1187
  return {
1179
1188
  name: dashName,
1180
- js: import_outdent13.outdent`
1189
+ js: import_outdent14.outdent`
1181
1190
  import { h } from 'preact'
1182
1191
  import { forwardRef } from 'preact/compat'
1183
1192
  ${ctx.file.import(factoryName, "./factory")}
@@ -1186,12 +1195,12 @@ function generatePreactJsxPattern(ctx) {
1186
1195
  export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
1187
1196
  ${(0, import_ts_pattern2.match)(props.length).with(
1188
1197
  0,
1189
- () => import_outdent13.outdent`
1198
+ () => import_outdent14.outdent`
1190
1199
  const styleProps = ${styleFnName}()
1191
1200
  return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
1192
1201
  `
1193
1202
  ).otherwise(
1194
- () => import_outdent13.outdent`
1203
+ () => import_outdent14.outdent`
1195
1204
  const { ${props.join(", ")}, ...restProps } = props
1196
1205
  const styleProps = ${styleFnName}({${props.join(", ")}})
1197
1206
  return h(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
@@ -1199,7 +1208,7 @@ function generatePreactJsxPattern(ctx) {
1199
1208
  )}
1200
1209
  })
1201
1210
  `,
1202
- dts: import_outdent13.outdent`
1211
+ dts: import_outdent14.outdent`
1203
1212
  import type { FunctionComponent } from 'preact'
1204
1213
  import type { ${upperName}Properties } from '../patterns/${dashName}'
1205
1214
  import type { ${typeName} } from '../types/jsx'
@@ -1214,15 +1223,15 @@ function generatePreactJsxPattern(ctx) {
1214
1223
  }
1215
1224
 
1216
1225
  // src/artifacts/preact-jsx/types.ts
1217
- var import_outdent14 = require("outdent");
1226
+ var import_outdent15 = require("outdent");
1218
1227
  function generatePreactJsxTypes(ctx) {
1219
1228
  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
1220
1229
  return {
1221
- jsxFactory: import_outdent14.outdent`
1230
+ jsxFactory: import_outdent15.outdent`
1222
1231
  import type { ${upperName} } from '../types/jsx'
1223
1232
  export declare const ${factoryName}: ${upperName}
1224
1233
  `,
1225
- jsxType: import_outdent14.outdent`
1234
+ jsxType: import_outdent15.outdent`
1226
1235
  import type { ComponentProps, JSX } from 'preact'
1227
1236
  import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
1228
1237
  import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1257,11 +1266,11 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
1257
1266
  }
1258
1267
 
1259
1268
  // src/artifacts/preact-jsx/jsx.string-literal.ts
1260
- var import_outdent15 = require("outdent");
1269
+ var import_outdent16 = require("outdent");
1261
1270
  function generatePreactJsxStringLiteralFactory(ctx) {
1262
1271
  const { factoryName, componentName } = ctx.jsx;
1263
1272
  return {
1264
- js: import_outdent15.outdent`
1273
+ js: import_outdent16.outdent`
1265
1274
  import { h } from 'preact'
1266
1275
  import { forwardRef } from 'preact/compat'
1267
1276
  ${ctx.file.import("css, cx", "../css/index")}
@@ -1307,15 +1316,15 @@ function generatePreactJsxStringLiteralFactory(ctx) {
1307
1316
  }
1308
1317
 
1309
1318
  // src/artifacts/preact-jsx/types.string-literal.ts
1310
- var import_outdent16 = require("outdent");
1319
+ var import_outdent17 = require("outdent");
1311
1320
  function generatePreactJsxStringLiteralTypes(ctx) {
1312
1321
  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
1313
1322
  return {
1314
- jsxFactory: import_outdent16.outdent`
1323
+ jsxFactory: import_outdent17.outdent`
1315
1324
  import type { ${upperName} } from '../types/jsx'
1316
1325
  export declare const ${factoryName}: ${upperName}
1317
1326
  `,
1318
- jsxType: import_outdent16.outdent`
1327
+ jsxType: import_outdent17.outdent`
1319
1328
  import type { ComponentProps, JSX } from 'preact'
1320
1329
 
1321
1330
  type ElementType = keyof JSX.IntrinsicElements
@@ -1341,11 +1350,11 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
1341
1350
  }
1342
1351
 
1343
1352
  // src/artifacts/qwik-jsx/jsx.ts
1344
- var import_outdent17 = require("outdent");
1353
+ var import_outdent18 = require("outdent");
1345
1354
  function generateQwikJsxFactory(ctx) {
1346
1355
  const { factoryName, componentName } = ctx.jsx;
1347
1356
  return {
1348
- js: import_outdent17.outdent`
1357
+ js: import_outdent18.outdent`
1349
1358
  import { h } from '@builder.io/qwik'
1350
1359
  ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
1351
1360
  ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
@@ -1409,7 +1418,7 @@ function generateQwikJsxFactory(ctx) {
1409
1418
  }
1410
1419
 
1411
1420
  // src/artifacts/qwik-jsx/pattern.ts
1412
- var import_outdent18 = require("outdent");
1421
+ var import_outdent19 = require("outdent");
1413
1422
  var import_ts_pattern3 = require("ts-pattern");
1414
1423
  function generateQwikJsxPattern(ctx) {
1415
1424
  const { typeName, factoryName } = ctx.jsx;
@@ -1418,7 +1427,7 @@ function generateQwikJsxPattern(ctx) {
1418
1427
  const { description, jsxElement = "div" } = pattern.config;
1419
1428
  return {
1420
1429
  name: dashName,
1421
- js: import_outdent18.outdent`
1430
+ js: import_outdent19.outdent`
1422
1431
  import { h } from '@builder.io/qwik'
1423
1432
  ${ctx.file.import(factoryName, "./factory")}
1424
1433
  ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
@@ -1426,12 +1435,12 @@ function generateQwikJsxPattern(ctx) {
1426
1435
  export const ${jsxName} = function ${jsxName}(props) {
1427
1436
  ${(0, import_ts_pattern3.match)(props.length).with(
1428
1437
  0,
1429
- () => import_outdent18.outdent`
1438
+ () => import_outdent19.outdent`
1430
1439
  const styleProps = ${styleFnName}()
1431
1440
  return h(${factoryName}.${jsxElement}, { ...styleProps, ...props })
1432
1441
  `
1433
1442
  ).otherwise(
1434
- () => import_outdent18.outdent`
1443
+ () => import_outdent19.outdent`
1435
1444
  const { ${props.join(", ")}, ...restProps } = props
1436
1445
  const styleProps = ${styleFnName}({${props.join(", ")}})
1437
1446
  return h(${factoryName}.${jsxElement}, { ...styleProps, ...restProps })
@@ -1439,7 +1448,7 @@ function generateQwikJsxPattern(ctx) {
1439
1448
  )}
1440
1449
  }
1441
1450
  `,
1442
- dts: import_outdent18.outdent`
1451
+ dts: import_outdent19.outdent`
1443
1452
  import type { FunctionComponent } from '@builder.io/qwik'
1444
1453
  import type { ${upperName}Properties } from '../patterns/${dashName}'
1445
1454
  import type { ${typeName} } from '../types/jsx'
@@ -1458,15 +1467,15 @@ function generateQwikJsxPattern(ctx) {
1458
1467
  }
1459
1468
 
1460
1469
  // src/artifacts/qwik-jsx/types.ts
1461
- var import_outdent19 = require("outdent");
1470
+ var import_outdent20 = require("outdent");
1462
1471
  function generateQwikJsxTypes(ctx) {
1463
1472
  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
1464
1473
  return {
1465
- jsxFactory: import_outdent19.outdent`
1474
+ jsxFactory: import_outdent20.outdent`
1466
1475
  import { ${upperName} } from '../types/jsx'
1467
1476
  export declare const ${factoryName}: ${upperName}
1468
1477
  `,
1469
- jsxType: import_outdent19.outdent`
1478
+ jsxType: import_outdent20.outdent`
1470
1479
  import type { FunctionComponent, QwikIntrinsicElements } from '@builder.io/qwik'
1471
1480
  import type { Assign as _Assign, JsxStyleProps, PatchedHTMLProps } from './system-types'
1472
1481
  import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1520,11 +1529,11 @@ export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T>, JsxSt
1520
1529
  }
1521
1530
 
1522
1531
  // src/artifacts/qwik-jsx/jsx.string-literal.ts
1523
- var import_outdent20 = require("outdent");
1532
+ var import_outdent21 = require("outdent");
1524
1533
  function generateQwikJsxStringLiteralFactory(ctx) {
1525
1534
  const { factoryName, componentName } = ctx.jsx;
1526
1535
  return {
1527
- js: import_outdent20.outdent`
1536
+ js: import_outdent21.outdent`
1528
1537
  import { h } from '@builder.io/qwik'
1529
1538
  ${ctx.file.import("css, cx", "../css/index")}
1530
1539
 
@@ -1569,15 +1578,15 @@ function generateQwikJsxStringLiteralFactory(ctx) {
1569
1578
  }
1570
1579
 
1571
1580
  // src/artifacts/qwik-jsx/types.string-literal.ts
1572
- var import_outdent21 = require("outdent");
1581
+ var import_outdent22 = require("outdent");
1573
1582
  function generateQwikJsxStringLiteralTypes(ctx) {
1574
1583
  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
1575
1584
  return {
1576
- jsxFactory: import_outdent21.outdent`
1585
+ jsxFactory: import_outdent22.outdent`
1577
1586
  import { ${upperName} } from '../types/jsx'
1578
1587
  export declare const ${factoryName}: ${upperName}
1579
1588
  `,
1580
- jsxType: import_outdent21.outdent`
1589
+ jsxType: import_outdent22.outdent`
1581
1590
  import type { FunctionComponent, QwikIntrinsicElements } from '@builder.io/qwik'
1582
1591
 
1583
1592
  type ElementType = keyof QwikIntrinsicElements | FunctionComponent<any>
@@ -1608,11 +1617,11 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
1608
1617
  }
1609
1618
 
1610
1619
  // src/artifacts/react-jsx/jsx.ts
1611
- var import_outdent22 = require("outdent");
1620
+ var import_outdent23 = require("outdent");
1612
1621
  function generateReactJsxFactory(ctx) {
1613
1622
  const { factoryName, componentName } = ctx.jsx;
1614
1623
  return {
1615
- js: import_outdent22.outdent`
1624
+ js: import_outdent23.outdent`
1616
1625
  import { createElement, forwardRef, useMemo } from 'react'
1617
1626
  ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
1618
1627
  ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
@@ -1678,7 +1687,7 @@ function generateReactJsxFactory(ctx) {
1678
1687
  }
1679
1688
 
1680
1689
  // src/artifacts/react-jsx/pattern.ts
1681
- var import_outdent23 = require("outdent");
1690
+ var import_outdent24 = require("outdent");
1682
1691
  var import_ts_pattern4 = require("ts-pattern");
1683
1692
  function generateReactJsxPattern(ctx) {
1684
1693
  const { typeName, factoryName } = ctx.jsx;
@@ -1687,7 +1696,7 @@ function generateReactJsxPattern(ctx) {
1687
1696
  const { description, jsxElement = "div" } = pattern.config;
1688
1697
  return {
1689
1698
  name: dashName,
1690
- js: import_outdent23.outdent`
1699
+ js: import_outdent24.outdent`
1691
1700
  import { createElement, forwardRef } from 'react'
1692
1701
  ${ctx.file.import(factoryName, "./factory")}
1693
1702
  ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
@@ -1695,12 +1704,12 @@ function generateReactJsxPattern(ctx) {
1695
1704
  export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
1696
1705
  ${(0, import_ts_pattern4.match)(props.length).with(
1697
1706
  0,
1698
- () => import_outdent23.outdent`
1707
+ () => import_outdent24.outdent`
1699
1708
  const styleProps = ${styleFnName}()
1700
1709
  return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...props })
1701
1710
  `
1702
1711
  ).otherwise(
1703
- () => import_outdent23.outdent`
1712
+ () => import_outdent24.outdent`
1704
1713
  const { ${props.join(", ")}, ...restProps } = props
1705
1714
  const styleProps = ${styleFnName}({${props.join(", ")}})
1706
1715
  return createElement(${factoryName}.${jsxElement}, { ref, ...styleProps, ...restProps })
@@ -1708,7 +1717,7 @@ function generateReactJsxPattern(ctx) {
1708
1717
  )}
1709
1718
  })
1710
1719
  `,
1711
- dts: import_outdent23.outdent`
1720
+ dts: import_outdent24.outdent`
1712
1721
  import type { FunctionComponent } from 'react'
1713
1722
  import type { ${upperName}Properties } from '../patterns/${dashName}'
1714
1723
  import type { ${typeName} } from '../types/jsx'
@@ -1723,15 +1732,15 @@ function generateReactJsxPattern(ctx) {
1723
1732
  }
1724
1733
 
1725
1734
  // src/artifacts/react-jsx/types.ts
1726
- var import_outdent24 = require("outdent");
1735
+ var import_outdent25 = require("outdent");
1727
1736
  function generateReactJsxTypes(ctx) {
1728
1737
  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
1729
1738
  return {
1730
- jsxFactory: import_outdent24.outdent`
1739
+ jsxFactory: import_outdent25.outdent`
1731
1740
  import { ${upperName} } from '../types/jsx'
1732
1741
  export declare const ${factoryName}: ${upperName}
1733
1742
  `,
1734
- jsxType: import_outdent24.outdent`
1743
+ jsxType: import_outdent25.outdent`
1735
1744
  import type { ComponentProps, ElementType } from 'react'
1736
1745
  import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
1737
1746
  import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -1764,11 +1773,11 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
1764
1773
  }
1765
1774
 
1766
1775
  // src/artifacts/react-jsx/jsx.string-literal.ts
1767
- var import_outdent25 = require("outdent");
1776
+ var import_outdent26 = require("outdent");
1768
1777
  function generateReactJsxStringLiteralFactory(ctx) {
1769
1778
  const { factoryName, componentName } = ctx.jsx;
1770
1779
  return {
1771
- js: import_outdent25.outdent`
1780
+ js: import_outdent26.outdent`
1772
1781
  import { createElement, forwardRef } from 'react'
1773
1782
  ${ctx.file.import("css, cx", "../css/index")}
1774
1783
 
@@ -1814,15 +1823,15 @@ function generateReactJsxStringLiteralFactory(ctx) {
1814
1823
  }
1815
1824
 
1816
1825
  // src/artifacts/react-jsx/types.string-literal.ts
1817
- var import_outdent26 = require("outdent");
1826
+ var import_outdent27 = require("outdent");
1818
1827
  function generateReactJsxStringLiteralTypes(ctx) {
1819
1828
  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
1820
1829
  return {
1821
- jsxFactory: import_outdent26.outdent`
1830
+ jsxFactory: import_outdent27.outdent`
1822
1831
  import { ${upperName} } from '../types/jsx'
1823
1832
  export declare const ${factoryName}: ${upperName}
1824
1833
  `,
1825
- jsxType: import_outdent26.outdent`
1834
+ jsxType: import_outdent27.outdent`
1826
1835
  import type { ComponentProps, ElementType } from 'react'
1827
1836
 
1828
1837
  type Dict = Record<string, unknown>
@@ -1846,11 +1855,11 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
1846
1855
  }
1847
1856
 
1848
1857
  // src/artifacts/solid-jsx/jsx.ts
1849
- var import_outdent27 = require("outdent");
1858
+ var import_outdent28 = require("outdent");
1850
1859
  function generateSolidJsxFactory(ctx) {
1851
1860
  const { componentName, factoryName } = ctx.jsx;
1852
1861
  return {
1853
- js: import_outdent27.outdent`
1862
+ js: import_outdent28.outdent`
1854
1863
  import { Dynamic } from 'solid-js/web'
1855
1864
  import { mergeProps, splitProps } from 'solid-js'
1856
1865
  import { createComponent } from 'solid-js/web'
@@ -1927,7 +1936,7 @@ function generateSolidJsxFactory(ctx) {
1927
1936
  }
1928
1937
 
1929
1938
  // src/artifacts/solid-jsx/pattern.ts
1930
- var import_outdent28 = require("outdent");
1939
+ var import_outdent29 = require("outdent");
1931
1940
  var import_ts_pattern5 = require("ts-pattern");
1932
1941
  function generateSolidJsxPattern(ctx) {
1933
1942
  const { typeName, factoryName } = ctx.jsx;
@@ -1936,7 +1945,7 @@ function generateSolidJsxPattern(ctx) {
1936
1945
  const { description, jsxElement = "div" } = pattern.config;
1937
1946
  return {
1938
1947
  name: dashName,
1939
- js: import_outdent28.outdent`
1948
+ js: import_outdent29.outdent`
1940
1949
  import { splitProps, mergeProps } from 'solid-js'
1941
1950
  import { createComponent } from 'solid-js/web'
1942
1951
  ${ctx.file.import(factoryName, "./factory")}
@@ -1945,12 +1954,12 @@ function generateSolidJsxPattern(ctx) {
1945
1954
  export function ${jsxName}(props) {
1946
1955
  ${(0, import_ts_pattern5.match)(props.length).with(
1947
1956
  0,
1948
- () => import_outdent28.outdent`
1957
+ () => import_outdent29.outdent`
1949
1958
  const styleProps = ${styleFnName}()
1950
1959
  return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, props))
1951
1960
  `
1952
1961
  ).otherwise(
1953
- () => import_outdent28.outdent`
1962
+ () => import_outdent29.outdent`
1954
1963
  const [patternProps, restProps] = splitProps(props, [${props.map((v) => JSON.stringify(v)).join(", ")}]);
1955
1964
  const styleProps = ${styleFnName}(patternProps)
1956
1965
  return createComponent(${factoryName}.${jsxElement}, mergeProps(styleProps, restProps))
@@ -1958,7 +1967,7 @@ function generateSolidJsxPattern(ctx) {
1958
1967
  )}
1959
1968
  }
1960
1969
  `,
1961
- dts: import_outdent28.outdent`
1970
+ dts: import_outdent29.outdent`
1962
1971
  import { Component } from 'solid-js'
1963
1972
  import { ${upperName}Properties } from '../patterns/${dashName}'
1964
1973
  import { ${typeName} } from '../types/jsx'
@@ -1973,15 +1982,15 @@ function generateSolidJsxPattern(ctx) {
1973
1982
  }
1974
1983
 
1975
1984
  // src/artifacts/solid-jsx/types.ts
1976
- var import_outdent29 = require("outdent");
1985
+ var import_outdent30 = require("outdent");
1977
1986
  function generateSolidJsxTypes(ctx) {
1978
1987
  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
1979
1988
  return {
1980
- jsxFactory: import_outdent29.outdent`
1989
+ jsxFactory: import_outdent30.outdent`
1981
1990
  import type { ${upperName} } from '../types/jsx'
1982
1991
  export declare const ${factoryName}: ${upperName}
1983
1992
  `,
1984
- jsxType: import_outdent29.outdent`
1993
+ jsxType: import_outdent30.outdent`
1985
1994
  import type { ComponentProps, Component, JSX } from 'solid-js'
1986
1995
  import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
1987
1996
  import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -2016,11 +2025,11 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
2016
2025
  }
2017
2026
 
2018
2027
  // src/artifacts/solid-jsx/jsx.string-literal.ts
2019
- var import_outdent30 = require("outdent");
2028
+ var import_outdent31 = require("outdent");
2020
2029
  function generateSolidJsxStringLiteralFactory(ctx) {
2021
2030
  const { componentName, factoryName } = ctx.jsx;
2022
2031
  return {
2023
- js: import_outdent30.outdent`
2032
+ js: import_outdent31.outdent`
2024
2033
  import { mergeProps, splitProps } from 'solid-js'
2025
2034
  import { Dynamic, createComponent } from 'solid-js/web'
2026
2035
  ${ctx.file.import("css, cx", "../css/index")}
@@ -2072,15 +2081,15 @@ export const ${factoryName} = createJsxFactory()
2072
2081
  }
2073
2082
 
2074
2083
  // src/artifacts/solid-jsx/types.string-literal.ts
2075
- var import_outdent31 = require("outdent");
2084
+ var import_outdent32 = require("outdent");
2076
2085
  function generateSolidJsxStringLiteralTypes(ctx) {
2077
2086
  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
2078
2087
  return {
2079
- jsxFactory: import_outdent31.outdent`
2088
+ jsxFactory: import_outdent32.outdent`
2080
2089
  import type { ${upperName} } from '../types/jsx'
2081
2090
  export declare const ${factoryName}: ${upperName}
2082
2091
  `,
2083
- jsxType: import_outdent31.outdent`
2092
+ jsxType: import_outdent32.outdent`
2084
2093
  import type { Component, ComponentProps, JSX } from 'solid-js'
2085
2094
 
2086
2095
  type Dict = Record<string, unknown>
@@ -2106,11 +2115,11 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
2106
2115
  }
2107
2116
 
2108
2117
  // src/artifacts/vue-jsx/jsx.ts
2109
- var import_outdent32 = require("outdent");
2118
+ var import_outdent33 = require("outdent");
2110
2119
  function generateVueJsxFactory(ctx) {
2111
2120
  const { factoryName } = ctx.jsx;
2112
2121
  return {
2113
- js: import_outdent32.outdent`
2122
+ js: import_outdent33.outdent`
2114
2123
  import { defineComponent, h, computed } from 'vue'
2115
2124
  ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
2116
2125
  ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
@@ -2184,11 +2193,11 @@ function generateVueJsxFactory(ctx) {
2184
2193
  }
2185
2194
 
2186
2195
  // src/artifacts/vue-jsx/jsx.string-literal.ts
2187
- var import_outdent33 = require("outdent");
2196
+ var import_outdent34 = require("outdent");
2188
2197
  function generateVueJsxStringLiteralFactory(ctx) {
2189
2198
  const { factoryName } = ctx.jsx;
2190
2199
  return {
2191
- js: import_outdent33.outdent`
2200
+ js: import_outdent34.outdent`
2192
2201
  import { defineComponent, h, computed } from 'vue'
2193
2202
  ${ctx.file.import("css, cx", "../css/index")}
2194
2203
 
@@ -2238,7 +2247,7 @@ function generateVueJsxStringLiteralFactory(ctx) {
2238
2247
  }
2239
2248
 
2240
2249
  // src/artifacts/vue-jsx/pattern.ts
2241
- var import_outdent34 = require("outdent");
2250
+ var import_outdent35 = require("outdent");
2242
2251
  function generateVueJsxPattern(ctx) {
2243
2252
  const { typeName, factoryName } = ctx.jsx;
2244
2253
  return ctx.patterns.details.map((pattern) => {
@@ -2247,7 +2256,7 @@ function generateVueJsxPattern(ctx) {
2247
2256
  const propList = props.map((v) => JSON.stringify(v)).join(", ");
2248
2257
  return {
2249
2258
  name: dashName,
2250
- js: import_outdent34.outdent`
2259
+ js: import_outdent35.outdent`
2251
2260
  import { defineComponent, h, computed } from 'vue'
2252
2261
  ${ctx.file.import(factoryName, "./factory")}
2253
2262
  ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
@@ -2265,7 +2274,7 @@ function generateVueJsxPattern(ctx) {
2265
2274
  }
2266
2275
  })
2267
2276
  `,
2268
- dts: import_outdent34.outdent`
2277
+ dts: import_outdent35.outdent`
2269
2278
  import { FunctionalComponent } from 'vue'
2270
2279
  import { ${upperName}Properties } from '../patterns/${dashName}'
2271
2280
  import { ${typeName} } from '../types/jsx'
@@ -2280,15 +2289,15 @@ function generateVueJsxPattern(ctx) {
2280
2289
  }
2281
2290
 
2282
2291
  // src/artifacts/vue-jsx/types.ts
2283
- var import_outdent35 = require("outdent");
2292
+ var import_outdent36 = require("outdent");
2284
2293
  function generateVueJsxTypes(ctx) {
2285
2294
  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
2286
2295
  return {
2287
- jsxFactory: import_outdent35.outdent`
2296
+ jsxFactory: import_outdent36.outdent`
2288
2297
  import { ${upperName} } from '../types/jsx'
2289
2298
  export declare const ${factoryName}: ${upperName}
2290
2299
  `,
2291
- jsxType: import_outdent35.outdent`
2300
+ jsxType: import_outdent36.outdent`
2292
2301
  import type { Component, FunctionalComponent } from 'vue'
2293
2302
  import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
2294
2303
  import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
@@ -2445,15 +2454,15 @@ type IntrinsicElement =
2445
2454
  }
2446
2455
 
2447
2456
  // src/artifacts/vue-jsx/types.string-literal.ts
2448
- var import_outdent36 = require("outdent");
2457
+ var import_outdent37 = require("outdent");
2449
2458
  function generateVueJsxStringLiteralTypes(ctx) {
2450
2459
  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
2451
2460
  return {
2452
- jsxFactory: import_outdent36.outdent`
2461
+ jsxFactory: import_outdent37.outdent`
2453
2462
  import { ${upperName} } from '../types/jsx'
2454
2463
  export declare const ${factoryName}: ${upperName}
2455
2464
  `,
2456
- jsxType: import_outdent36.outdent`
2465
+ jsxType: import_outdent37.outdent`
2457
2466
  import type { Component, FunctionalComponent } from 'vue'
2458
2467
 
2459
2468
  type IntrinsicElement =
@@ -2668,22 +2677,27 @@ function generatePackageJson(ctx) {
2668
2677
  exports: {
2669
2678
  "./css": {
2670
2679
  types: "./css/index.d.ts",
2680
+ require: "./css/index.mjs",
2671
2681
  import: "./css/index.mjs"
2672
2682
  },
2673
2683
  "./jsx": {
2674
2684
  types: "./jsx/index.d.ts",
2685
+ require: "./jsx/index.mjs",
2675
2686
  import: "./jsx/index.mjs"
2676
2687
  },
2677
2688
  "./patterns": {
2678
2689
  types: "./patterns/index.d.ts",
2690
+ require: "./patterns/index.mjs",
2679
2691
  import: "./patterns/index.mjs"
2680
2692
  },
2681
2693
  "./recipes": {
2682
2694
  types: "./recipes/index.d.ts",
2695
+ require: "./recipes/index.mjs",
2683
2696
  import: "./recipes/index.mjs"
2684
2697
  },
2685
2698
  "./tokens": {
2686
2699
  types: "./tokens/index.d.ts",
2700
+ require: "./tokens/index.mjs",
2687
2701
  import: "./tokens/index.mjs"
2688
2702
  },
2689
2703
  "./types": {
@@ -2717,7 +2731,7 @@ var recipe_d_ts_default = {
2717
2731
 
2718
2732
  // src/artifacts/generated/pattern.d.ts.json
2719
2733
  var pattern_d_ts_default = {
2720
- 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"
2734
+ 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"
2721
2735
  };
2722
2736
 
2723
2737
  // src/artifacts/generated/parts.d.ts.json
@@ -2744,12 +2758,12 @@ function getGeneratedTypes() {
2744
2758
  }
2745
2759
 
2746
2760
  // src/artifacts/types/main.ts
2747
- var import_outdent37 = require("outdent");
2761
+ var import_outdent38 = require("outdent");
2748
2762
  var generateTypesEntry = () => ({
2749
- global: import_outdent37.outdent`
2763
+ global: import_outdent38.outdent`
2750
2764
  import type { RecipeVariantRecord, RecipeConfig } from './recipe'
2751
2765
  import type { Parts } from './parts'
2752
- import type { PatternConfig } from './pattern'
2766
+ import type { PatternConfig, PatternProperties } from './pattern'
2753
2767
  import type { GlobalStyleObject, SystemStyleObject } from './system-types'
2754
2768
  import type { CompositionStyles } from './composition'
2755
2769
 
@@ -2759,23 +2773,23 @@ var generateTypesEntry = () => ({
2759
2773
  export function defineGlobalStyles(definition: GlobalStyleObject): GlobalStyleObject
2760
2774
  export function defineTextStyles(definition: CompositionStyles['textStyles']): CompositionStyles['textStyles']
2761
2775
  export function defineLayerStyles(definition: CompositionStyles['layerStyles']): CompositionStyles['layerStyles']
2762
- export function definePattern<T>(config: PatternConfig<T>): PatternConfig
2776
+ export function definePattern<T extends PatternProperties>(config: PatternConfig<T>): PatternConfig
2763
2777
  export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>;
2764
2778
  }
2765
2779
  `,
2766
- index: import_outdent37.outdent`
2780
+ index: import_outdent38.outdent`
2767
2781
  import './global'
2768
2782
  export type { ConditionalValue } from './conditions'
2769
2783
  export type { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
2770
2784
 
2771
2785
  `,
2772
- helpers: import_outdent37.outdent`
2786
+ helpers: import_outdent38.outdent`
2773
2787
  export type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
2774
2788
  `
2775
2789
  });
2776
2790
 
2777
2791
  // src/artifacts/types/prop-types.ts
2778
- var import_outdent38 = require("outdent");
2792
+ var import_outdent39 = require("outdent");
2779
2793
  function generatePropTypes(ctx) {
2780
2794
  const {
2781
2795
  config: { strictTokens },
@@ -2783,7 +2797,7 @@ function generatePropTypes(ctx) {
2783
2797
  } = ctx;
2784
2798
  const strictText = `${strictTokens ? "" : " | CssValue<T>"}`;
2785
2799
  const result = [
2786
- import_outdent38.outdent`
2800
+ import_outdent39.outdent`
2787
2801
  import type { ConditionalValue } from './conditions';
2788
2802
  import type { CssProperties } from './system-types'
2789
2803
  import type { Tokens } from '../tokens'
@@ -2806,7 +2820,7 @@ function generatePropTypes(ctx) {
2806
2820
  result.push(` ${key}: Shorthand<${JSON.stringify(value)}>;`);
2807
2821
  });
2808
2822
  result.push("}");
2809
- return import_outdent38.outdent`
2823
+ return import_outdent39.outdent`
2810
2824
  ${result.join("\n")}
2811
2825
 
2812
2826
  export type PropertyValue<T extends string> = T extends keyof PropertyTypes
@@ -2819,10 +2833,10 @@ function generatePropTypes(ctx) {
2819
2833
 
2820
2834
  // src/artifacts/types/style-props.ts
2821
2835
  var import_is_valid_prop = require("@pandacss/is-valid-prop");
2822
- var import_outdent39 = __toESM(require("outdent"));
2836
+ var import_outdent40 = __toESM(require("outdent"));
2823
2837
  function generateStyleProps(ctx) {
2824
2838
  const props = new Set(import_is_valid_prop.allCssProperties.concat(ctx.utility.keys()));
2825
- return import_outdent39.default`
2839
+ return import_outdent40.default`
2826
2840
  import type { ConditionalValue } from './conditions'
2827
2841
  import type { PropertyValue } from './prop-type'
2828
2842
  import type { Token } from '../tokens'
@@ -2839,7 +2853,7 @@ function generateStyleProps(ctx) {
2839
2853
 
2840
2854
  // src/artifacts/types/token-types.ts
2841
2855
  var import_shared3 = require("@pandacss/shared");
2842
- var import_outdent40 = require("outdent");
2856
+ var import_outdent41 = require("outdent");
2843
2857
  var import_pluralize = __toESM(require("pluralize"));
2844
2858
  var categories = [
2845
2859
  "zIndex",
@@ -2884,7 +2898,7 @@ function generateTokenTypes(ctx) {
2884
2898
  result.add("} & { [token: string]: never }");
2885
2899
  set.add(Array.from(result).join("\n"));
2886
2900
  set.add(`export type TokenCategory = ${(0, import_shared3.unionType)(categories)}`);
2887
- return import_outdent40.outdent.string(Array.from(set).join("\n\n"));
2901
+ return import_outdent41.outdent.string(Array.from(set).join("\n\n"));
2888
2902
  }
2889
2903
 
2890
2904
  // src/artifacts/index.ts
@@ -2981,8 +2995,8 @@ function setupRecipes(ctx) {
2981
2995
  return;
2982
2996
  const indexFiles = files.filter((file) => !file.name.includes("create-recipe"));
2983
2997
  const index = {
2984
- js: import_outdent41.default.string(indexFiles.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
2985
- dts: import_outdent41.default.string(indexFiles.map((file) => `export * from './${file.name}'`).join("\n"))
2998
+ js: import_outdent42.default.string(indexFiles.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
2999
+ dts: import_outdent42.default.string(indexFiles.map((file) => `export * from './${file.name}'`).join("\n"))
2986
3000
  };
2987
3001
  return {
2988
3002
  dir: ctx.paths.recipe,
@@ -3001,8 +3015,8 @@ function setupPatterns(ctx) {
3001
3015
  if (!files)
3002
3016
  return;
3003
3017
  const index = {
3004
- js: import_outdent41.default.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
3005
- dts: import_outdent41.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
3018
+ js: import_outdent42.default.string(files.map((file) => ctx.file.export(`./${file.name}`)).join("\n")),
3019
+ dts: import_outdent42.default.string(files.map((file) => `export * from './${file.name}'`).join("\n"))
3006
3020
  };
3007
3021
  return {
3008
3022
  dir: ctx.paths.pattern,
@@ -3022,13 +3036,15 @@ function setupJsx(ctx) {
3022
3036
  const factory = generateJsxFactory(ctx);
3023
3037
  const patterns = generateJsxPatterns(ctx);
3024
3038
  const index = {
3025
- js: import_outdent41.default`
3039
+ js: import_outdent42.default`
3026
3040
  ${ctx.file.export("./factory")}
3027
- ${import_outdent41.default.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
3041
+ ${isValidProp?.js ? ctx.file.export("./is-valid-prop") : ""}
3042
+ ${import_outdent42.default.string(patterns.map((file) => ctx.file.export(`./${file.name}`)).join("\n"))}
3028
3043
  `,
3029
- dts: import_outdent41.default`
3044
+ dts: import_outdent42.default`
3030
3045
  export * from './factory'
3031
- ${import_outdent41.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
3046
+ ${isValidProp?.dts ? `export * from './is-valid-prop'` : ""}
3047
+ ${import_outdent42.default.string(patterns.map((file) => `export * from './${file.name}'`).join("\n"))}
3032
3048
  export type { ${ctx.jsx.typeName} } from '../types/jsx'
3033
3049
  `
3034
3050
  };
@@ -3038,6 +3054,7 @@ function setupJsx(ctx) {
3038
3054
  ...patterns.map((file) => ({ file: ctx.file.ext(file.name), code: file.js })),
3039
3055
  ...patterns.map((file) => ({ file: `${file.name}.d.ts`, code: file.dts })),
3040
3056
  { file: ctx.file.ext("is-valid-prop"), code: isValidProp?.js },
3057
+ { file: "is-valid-prop.d.ts", code: isValidProp?.dts },
3041
3058
  { file: "factory.d.ts", code: types.jsxFactory },
3042
3059
  { file: ctx.file.ext("factory"), code: factory?.js },
3043
3060
  { file: "index.d.ts", code: index.dts },
@@ -3047,12 +3064,12 @@ function setupJsx(ctx) {
3047
3064
  }
3048
3065
  function setupCssIndex(ctx) {
3049
3066
  const index = {
3050
- js: import_outdent41.default`
3067
+ js: import_outdent42.default`
3051
3068
  ${ctx.file.export("./css")}
3052
3069
  ${ctx.file.export("./cx")}
3053
3070
  ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.export("./cva")}
3054
3071
  `,
3055
- dts: import_outdent41.default`
3072
+ dts: import_outdent42.default`
3056
3073
  export * from './css'
3057
3074
  export * from './cx'
3058
3075
  ${ctx.isTemplateLiteralSyntax ? "" : `export * from './cva'`}
@@ -3127,9 +3144,9 @@ var generateFlattenedCss = (ctx) => (options) => {
3127
3144
  const { theme: { keyframes } = {}, preflight, minify, staticCss } = ctx.config;
3128
3145
  const unresolved = [
3129
3146
  "@layer reset, base, tokens, recipes, utilities;",
3147
+ preflight && "@import './reset.css';",
3130
3148
  "@import './global.css';",
3131
3149
  staticCss && "@import './static.css';",
3132
- preflight && "@import './reset.css';",
3133
3150
  !ctx.tokens.isEmpty && "@import './tokens/index.css';",
3134
3151
  keyframes && "@import './tokens/keyframes.css';"
3135
3152
  ].filter(Boolean).join("\n\n");
@@ -3150,7 +3167,6 @@ var generateFlattenedCss = (ctx) => (options) => {
3150
3167
  var import_logger2 = require("@pandacss/logger");
3151
3168
  var import_func = require("lil-fp/func");
3152
3169
  var import_ts_pattern6 = require("ts-pattern");
3153
- var flattenStyles = (data) => Object.assign({}, data, { css: void 0 }, data.css ?? {});
3154
3170
  var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
3155
3171
  { ...ctx, sheet: ctx.createSheet(), result },
3156
3172
  (0, import_func.tap)(({ sheet, result: result2, patterns, recipes }) => {
@@ -3166,7 +3182,7 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
3166
3182
  });
3167
3183
  result2.jsx.forEach((jsx) => {
3168
3184
  jsx.data.forEach((data) => {
3169
- sheet.processAtomic(flattenStyles(data));
3185
+ sheet.processStyleProps(data);
3170
3186
  });
3171
3187
  });
3172
3188
  result2.recipe.forEach((recipeSet, name) => {
@@ -3177,8 +3193,8 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
3177
3193
  continue;
3178
3194
  (0, import_ts_pattern6.match)(recipe).with({ type: "jsx-recipe", name: import_ts_pattern6.P.string }, ({ name: name2 }) => {
3179
3195
  recipe.data.forEach((data) => {
3180
- const [recipeProps, styleProps] = recipes.splitProps(name2, flattenStyles(data));
3181
- sheet.processAtomic(styleProps);
3196
+ const [recipeProps, styleProps] = recipes.splitProps(name2, data);
3197
+ sheet.processStyleProps(styleProps);
3182
3198
  sheet.processRecipe(recipeConfig, recipeProps);
3183
3199
  });
3184
3200
  }).otherwise(() => {
@@ -3197,8 +3213,8 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
3197
3213
  (0, import_ts_pattern6.match)(pattern).with({ type: "jsx-pattern", name: import_ts_pattern6.P.string }, ({ name: name2 }) => {
3198
3214
  pattern.data.forEach((data) => {
3199
3215
  const fnName = patterns.getFnName(name2);
3200
- const styleProps = patterns.transform(fnName, flattenStyles(data));
3201
- sheet.processAtomic(styleProps);
3216
+ const styleProps = patterns.transform(fnName, data);
3217
+ sheet.processStyleProps(styleProps);
3202
3218
  });
3203
3219
  }).otherwise(() => {
3204
3220
  pattern.data.forEach((data) => {
@@ -3431,25 +3447,30 @@ var getImportMap = (outdir) => ({
3431
3447
  pattern: `${outdir}/patterns`,
3432
3448
  jsx: `${outdir}/jsx`
3433
3449
  });
3434
- var createGenerator = (conf) => (0, import_lil_fp3.pipe)(
3435
- getEngine(defaults(conf)),
3436
- import_lil_fp3.Obj.assign((ctx) => ({
3450
+ var createGenerator = (conf) => {
3451
+ const ctx = getEngine(defaults(conf));
3452
+ const { config, jsx, isValidProperty, patterns, recipes } = ctx;
3453
+ const compilerOptions = conf.tsconfig?.compilerOptions ?? {};
3454
+ const baseUrl = compilerOptions.baseUrl ?? "";
3455
+ const cwd = conf.config.cwd;
3456
+ const relativeBaseUrl = baseUrl ? baseUrl.replace(cwd, "").slice(1) + "/" : cwd;
3457
+ return {
3458
+ ...ctx,
3437
3459
  getArtifacts: generateArtifacts(ctx),
3438
3460
  getCss: generateFlattenedCss(ctx),
3439
3461
  getParserCss: generateParserCss(ctx),
3440
- messages: getMessages(ctx)
3441
- })),
3442
- import_lil_fp3.Obj.bind("parserOptions", ({ config: { outdir }, jsx, isValidProperty, patterns, recipes }) => ({
3443
- importMap: getImportMap(outdir),
3444
- jsx: {
3445
- factory: jsx.factoryName,
3446
- isStyleProp: isValidProperty,
3447
- nodes: [...patterns.nodes, ...recipes.nodes]
3448
- },
3449
- getRecipeName: recipes.getFnName,
3450
- getRecipeByName: recipes.getConfig
3451
- }))
3452
- );
3462
+ messages: getMessages(ctx),
3463
+ parserOptions: {
3464
+ importMap: getImportMap(config.outdir.replace(relativeBaseUrl, "")),
3465
+ jsx: {
3466
+ factory: jsx.factoryName,
3467
+ isStyleProp: isValidProperty,
3468
+ nodes: [...patterns.nodes, ...recipes.nodes]
3469
+ },
3470
+ getRecipesByJsxName: recipes.filter
3471
+ }
3472
+ };
3473
+ };
3453
3474
  // Annotate the CommonJS export names for ESM import in node:
3454
3475
  0 && (module.exports = {
3455
3476
  createGenerator,