@pandacss/generator 0.29.1 → 0.30.1

package/dist/index.js

@@ -35,7 +35,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/generator.ts
-var import_core4 = require("@pandacss/core");
+var import_core5 = require("@pandacss/core");
 var import_ts_pattern12 = require("ts-pattern");
 
 // src/artifacts/setup-artifacts.ts
@@ -219,6 +219,7 @@ function generateCssFn(ctx) {
               return { className: \`\${propKey}${separator}\${withoutSpace(value)}\` }
             }` : `(key, value) => ({ className: \`\${classNameByProp.get(key) || hypenateProperty(key)}${separator}\${withoutSpace(value)}\` })`},
         ${utility.hasShorthand ? "hasShorthand: true," : ""}
+        toHash: ${utility.toHash},
         resolveShorthand: ${utility.hasShorthand ? "resolveShorthand" : "prop => prop"},
       }
     }
@@ -261,6 +262,7 @@ function generateStringLiteralCssFn(ctx) {
         prefix: ${prefix.className ? JSON.stringify(prefix.className) : void 0},
         transform,
         hasShorthand: false,
+        toHash: ${utility.toHash},
         resolveShorthand(prop) {
           return prop
         },
@@ -418,7 +420,7 @@ var astish_mjs_default = {
 
 // src/artifacts/generated/helpers.mjs.json
 var helpers_mjs_default = {
-  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/important.ts\nvar importantRegex = /\\s*!(important)?/i;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const objects = sources.filter(Boolean);\n  return objects.reduce((prev, obj) => {\n    Object.keys(obj).forEach((key) => {\n      const prevValue = prev[key];\n      const value = obj[key];\n      if (isObject(prevValue) && isObject(value)) {\n        prev[key] = mergeProps(prevValue, value);\n      } else {\n        prev[key] = value;\n      }\n    });\n    return prev;\n  }, {});\n}\n\n// src/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/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 (Array.isArray(obj))\n    return obj.map((value) => fn(value));\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction 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, shorthand = true) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return memo((styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  });\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => 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: memo(mergeCss), assignCss };\n}\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/is-css-function.ts\nvar fns = ["min", "max", "clamp", "calc"];\nvar fnRegExp = new RegExp(`^(${fns.join("|")})\\\\(.*\\\\)`);\nvar isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v);\n\n// src/is-css-unit.ts\nvar lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";\nvar lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`;\nvar lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);\nvar isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v);\n\n// src/is-css-var.ts\nvar isCssVar = (v) => typeof v === "string" && /^var\\(--.+\\)$/.test(v);\n\n// src/pattern-fns.ts\nvar patternFns = {\n  map: mapObject,\n  isCssFunction,\n  isCssVar,\n  isCssUnit\n};\nvar getPatternStyles = (pattern, styles) => {\n  if (!pattern.defaultValues)\n    return styles;\n  const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues;\n  return Object.assign({}, defaults, compact(styles));\n};\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n  const init = (slot) => ({\n    className: [recipe.className, slot].filter(Boolean).join("__"),\n    base: recipe.base?.[slot] ?? {},\n    variants: {},\n    defaultVariants: recipe.defaultVariants ?? {},\n    compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n  });\n  const slots = recipe.slots ?? [];\n  const recipeParts = slots.map((slot) => [slot, init(slot)]);\n  for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n    for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n      recipeParts.forEach(([slot, slotRecipe]) => {\n        slotRecipe.variants[variantsKey] ??= {};\n        slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n      });\n    }\n  }\n  return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  getPatternStyles,\n  getSlotCompoundVariant,\n  getSlotRecipes,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  memo,\n  mergeProps,\n  patternFns,\n  splitProps,\n  toHash,\n  uniq,\n  walkObject,\n  withoutSpace\n};\n'
+  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/important.ts\nvar importantRegex = /\\s*!(important)?/i;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const objects = sources.filter(Boolean);\n  return objects.reduce((prev, obj) => {\n    Object.keys(obj).forEach((key) => {\n      const prevValue = prev[key];\n      const value = obj[key];\n      if (isObject(prevValue) && isObject(value)) {\n        prev[key] = mergeProps(prevValue, value);\n      } else {\n        prev[key] = value;\n      }\n    });\n    return prev;\n  }, {});\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop, child) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (Array.isArray(obj))\n    return obj.map((value) => fn(value));\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(utility.toHash(baseArray, toHash));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return memo((styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  });\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeStyleObject(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss: memo(mergeCss), assignCss };\n}\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/is-css-function.ts\nvar fns = ["min", "max", "clamp", "calc"];\nvar fnRegExp = new RegExp(`^(${fns.join("|")})\\\\(.*\\\\)`);\nvar isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v);\n\n// src/is-css-unit.ts\nvar lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";\nvar lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`;\nvar lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);\nvar isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v);\n\n// src/is-css-var.ts\nvar isCssVar = (v) => typeof v === "string" && /^var\\(--.+\\)$/.test(v);\n\n// src/pattern-fns.ts\nvar patternFns = {\n  map: mapObject,\n  isCssFunction,\n  isCssVar,\n  isCssUnit\n};\nvar getPatternStyles = (pattern, styles) => {\n  if (!pattern.defaultValues)\n    return styles;\n  const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues;\n  return Object.assign({}, defaults, compact(styles));\n};\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n  const init = (slot) => ({\n    className: [recipe.className, slot].filter(Boolean).join("__"),\n    base: recipe.base?.[slot] ?? {},\n    variants: {},\n    defaultVariants: recipe.defaultVariants ?? {},\n    compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n  });\n  const slots = recipe.slots ?? [];\n  const recipeParts = slots.map((slot) => [slot, init(slot)]);\n  for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n    for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n      recipeParts.forEach(([slot, slotRecipe]) => {\n        slotRecipe.variants[variantsKey] ??= {};\n        slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n      });\n    }\n  }\n  return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  getPatternStyles,\n  getSlotCompoundVariant,\n  getSlotRecipes,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  memo,\n  mergeProps,\n  patternFns,\n  splitProps,\n  toHash,\n  uniq,\n  walkObject,\n  withoutSpace\n};\n'
 };
 
 // src/artifacts/generated/normalize-html.mjs.json
@@ -623,13 +625,7 @@ var import_ts_pattern4 = require("ts-pattern");
 var stringify2 = (value) => JSON.stringify(value, null, 2);
 var isBooleanValue = (value) => value === "true" || value === "false";
 function generateCreateRecipe(ctx) {
-  const {
-    conditions,
-    recipes,
-    prefix,
-    hash,
-    utility: { separator }
-  } = ctx;
+  const { conditions, recipes, prefix, hash, utility } = ctx;
   if (recipes.isEmpty())
     return;
   return {
@@ -660,7 +656,7 @@ function generateCreateRecipe(ctx) {
          }
 
          value = withoutSpace(value)
-         return { className: \`\${name}--\${prop}${separator}\${value}\` }
+         return { className: \`\${name}--\${prop}${utility.separator}\${value}\` }
       }
 
       const recipeCss = createCss({
@@ -672,6 +668,7 @@ function generateCreateRecipe(ctx) {
         },
         utility: {
           ${prefix.className ? "prefix: " + JSON.stringify(prefix.className) + "," : ""}
+          toHash: ${utility.toHash},
           transform,
         }
       })
@@ -3026,16 +3023,16 @@ function generateTokenTypes(ctx) {
     config: { theme }
   } = ctx;
   const set = /* @__PURE__ */ new Set();
-  set.add(`export type Token = ${tokens.isEmpty ? "string" : (0, import_shared3.unionType)(tokens.allNames)}`);
+  set.add(`export type Token = ${tokens.isEmpty ? "string" : (0, import_shared3.unionType)(Array.from(tokens.byName.keys()))}`);
   const result = /* @__PURE__ */ new Set(["export type Tokens = {"]);
   if (tokens.isEmpty) {
     result.add("[token: string]: string");
   } else {
-    const colorPaletteKeys = Object.keys(tokens.colorPalettes);
+    const colorPaletteKeys = Array.from(tokens.view.colorPalettes.keys());
     if (colorPaletteKeys.length) {
-      set.add(`export type ColorPalette = ${(0, import_shared3.unionType)(Object.keys(tokens.colorPalettes))}`);
+      set.add(`export type ColorPalette = ${(0, import_shared3.unionType)(colorPaletteKeys)}`);
     }
-    for (const [key, value] of tokens.categoryMap.entries()) {
+    for (const [key, value] of tokens.view.categoryMap.entries()) {
       const typeName = (0, import_shared3.capitalize)(import_pluralize.default.singular(key));
       set.add(`export type ${typeName}Token = ${(0, import_shared3.unionType)(value.keys())}`);
       result.add(`		${key}: ${typeName}Token`);
@@ -3446,8 +3443,8 @@ var entries = [
 var getMatchingArtifacts = (ctx, filters) => {
   const ids = filters?.ids;
   if (!ids)
-    return entries.map(([_artifactId, fn]) => fn(ctx));
-  return entries.filter(([artifactId]) => ids.includes(artifactId)).map(([_artifactId, fn]) => fn(ctx, filters));
+    return entries.map(([_artifactId, fn]) => fn(ctx)).filter(Boolean);
+  return entries.filter(([artifactId]) => ids.includes(artifactId)).map(([_artifactId, fn]) => fn(ctx, filters)).filter(Boolean);
 };
 var transformArtifact = (ctx, artifact) => {
   const files = (artifact?.files ?? []).filter((item) => !!item?.code).map((item) => {
@@ -3469,7 +3466,7 @@ var setupArtifacts = (ctx, ids) => {
 // src/artifacts/index.ts
 var generateArtifacts = (ctx, ids) => {
   if (ctx.config.emitTokensOnly) {
-    return [setupDesignTokens(ctx)];
+    return [setupDesignTokens(ctx)].filter(Boolean);
   }
   return setupArtifacts(ctx, ids);
 };
@@ -3523,11 +3520,11 @@ function generateKeyframeCss(ctx, sheet) {
   for (const [name, definition] of Object.entries(keyframes)) {
     result[`@keyframes ${name}`] = definition;
   }
-  let css2 = (0, import_core2.stringify)(sheet.serialize(result));
+  let css = (0, import_core2.stringify)(sheet.serialize(result));
   if (ctx.hooks["cssgen:done"]) {
-    css2 = ctx.hooks["cssgen:done"]({ artifact: "keyframes", content: css2 }) ?? css2;
+    css = ctx.hooks["cssgen:done"]({ artifact: "keyframes", content: css }) ?? css;
   }
-  sheet.layers.tokens.append(css2);
+  sheet.layers.tokens.append(css);
 }
 
 // src/artifacts/css/parser-css.ts
@@ -3539,8 +3536,8 @@ var generateParserCss = (ctx, decoder) => {
   const { minify, optimize } = ctx.config;
   sheet.processDecoder(decoder);
   try {
-    const css2 = sheet.toCss({ minify, optimize });
-    return css2;
+    const css = sheet.toCss({ minify, optimize });
+    return css;
   } catch (err) {
     import_logger.logger.error("serializer:css", "Failed to serialize CSS: " + err);
     return "";
@@ -3548,234 +3545,108 @@ var generateParserCss = (ctx, decoder) => {
 };
 
 // src/artifacts/css/reset-css.ts
+var import_core3 = require("@pandacss/core");
 var import_shared4 = require("@pandacss/shared");
-var css = String.raw;
 function generateResetCss(ctx, sheet) {
   const { preflight } = ctx.config;
   const scope = (0, import_shared4.isObject)(preflight) ? preflight.scope : void 0;
   const selector = scope ? `${scope} ` : "";
-  let output = css`
-  ${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);
-  }
-
-  ${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-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -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;
-  }
-
-  body {
-    height: 100%;
-    line-height: inherit;
-  }
-
-  ${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}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}ol,
-  ${selector}ul {
-    list-style: none;
-  }
-
-  ${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}input,
-  ${selector}optgroup,
-  ${selector}select,
-  ${selector}textarea {
-    color: inherit;
-  }
-
-  ${selector}button,
-  ${selector}select {
-    text-transform: none;
-  }
-
-  ${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}textarea {
-    resize: vertical;
-  }
-
-  ${selector}summary {
-    display: list-item;
-  }
-
-  ${selector}small {
-    font-size: 80%;
-  }
-
-  ${selector}sub,
-  ${selector}sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-
-  ${selector}sub {
-    bottom: -0.25em;
-  }
-
-  ${selector}sup {
-    top: -0.5em;
-  }
-
-  ${selector}dialog {
-    padding: 0;
-  }
-
-  ${selector}a {
-    color: inherit;
-    text-decoration: inherit;
-  }
-
-  ${selector}abbr:where([title]) {
-    text-decoration: underline dotted;
-  }
-
-  ${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-mono-fallback));
-  }
-
-
-  ${selector}input[type="text"],
-  ${selector}input[type="email"],
-  ${selector}input[type="search"],
-  ${selector}input[type="password"] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-  }
-
-  ${selector}input[type='search'] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
-  }
-
-  ${selector}::-webkit-search-decoration,
-  ${selector}::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-  }
-
-  ${selector}::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    font: inherit;
-  }
-
-  ${selector}input[type="number"]::-webkit-inner-spin-button,
-  ${selector}input[type="number"]::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  ${selector}input[type='number']{
-    -moz-appearance: textfield;
-  }
-
-  ${selector}:-moz-ui-invalid {
-    box-shadow: none;
-  }
-
-  ${selector}:-moz-focusring {
-    outline: auto;
-  }
-
-  ${selector}[hidden] {
-    display: none !important;
-  }
-`;
-  if (ctx.hooks["cssgen:done"]) {
-    output = ctx.hooks["cssgen:done"]({ artifact: "reset", content: output }) ?? output;
+  const scoped = {
+    "*": { margin: "0px", padding: "0px", font: "inherit" },
+    "*, *::before, *::after": {
+      boxSizing: "border-box",
+      borderWidth: "0px",
+      borderStyle: "solid",
+      borderColor: "var(--global-color-border, currentColor)"
+    },
+    hr: { height: "0px", color: "inherit", borderTopWidth: "1px" },
+    body: { height: "100%", lineHeight: "inherit" },
+    img: { borderStyle: "none" },
+    "img,  svg,  video,  canvas,  audio,  iframe,  embed,  object": {
+      display: "block",
+      verticalAlign: "middle"
+    },
+    "img,  video": { maxWidth: "100%", height: "auto" },
+    "p,  h1,  h2,  h3,  h4,  h5,  h6": { overflowWrap: "break-word" },
+    "ol,  ul": { listStyle: "none" },
+    "code,  kbd,  pre,  samp": { fontSize: "1em" },
+    "button,  [type='button'],  [type='reset'],  [type='submit']": {
+      WebkitAppearance: "button",
+      backgroundColor: "transparent",
+      backgroundImage: "none"
+    },
+    "button,  input,  optgroup,  select,  textarea": { color: "inherit" },
+    "button,  select": { textTransform: "none" },
+    table: {
+      textIndent: "0px",
+      borderColor: "inherit",
+      borderCollapse: "collapse"
+    },
+    "input::placeholder,  textarea::placeholder": {
+      opacity: 1,
+      color: "var(--global-color-placeholder, #9ca3af)"
+    },
+    textarea: { resize: "vertical" },
+    summary: { display: "list-item" },
+    small: { fontSize: "80%" },
+    "sub,  sup": {
+      fontSize: "75%",
+      lineHeight: 0,
+      position: "relative",
+      verticalAlign: "baseline"
+    },
+    sub: { bottom: "-0.25em" },
+    sup: { top: "-0.5em" },
+    dialog: { padding: "0px" },
+    a: { color: "inherit", textDecoration: "inherit" },
+    "abbr:where([title])": { textDecoration: "underline dotted" },
+    "b,  strong": { fontWeight: "bolder" },
+    "code,  kbd,  samp,  pre": {
+      fontSize: "1em",
+      "--font-mono-fallback": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New'",
+      fontFamily: "var(--global-font-mono, var(--font-mono-fallback))"
+    },
+    'input[type="text"],  input[type="email"],  input[type="search"],  input[type="password"]': {
+      WebkitAppearance: "none",
+      MozAppearance: "none"
+    },
+    "input[type='search']": {
+      WebkitAppearance: "textfield",
+      outlineOffset: "-2px"
+    },
+    "::-webkit-search-decoration,  ::-webkit-search-cancel-button": {
+      WebkitAppearance: "none"
+    },
+    "::-webkit-file-upload-button": {
+      WebkitAppearance: "button",
+      font: "inherit"
+    },
+    'input[type="number"]::-webkit-inner-spin-button,  input[type="number"]::-webkit-outer-spin-button': {
+      height: "auto"
+    },
+    "input[type='number']": { MozAppearance: "textfield" },
+    ":-moz-ui-invalid": { boxShadow: "none" },
+    ":-moz-focusring": { outline: "auto" },
+    "[hidden]": { display: "none !important" }
+  };
+  const reset = {
+    [scope || "html"]: {
+      lineHeight: 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'",
+      WebkitTextSizeAdjust: "100%",
+      WebkitFontSmoothing: "antialiased",
+      MozOsxFontSmoothing: "grayscale",
+      MozTabSize: "[4]",
+      tabSize: "[4]",
+      fontFamily: "var(--global-font-body, var(--font-fallback))"
+    }
+  };
+  if (selector) {
+    reset[selector] = scoped;
+  } else {
+    Object.assign(reset, scoped);
   }
-  sheet.layers.reset.append(output);
+  sheet.processResetCss(reset);
 }
 
 // src/artifacts/css/static-css.ts
@@ -3784,16 +3655,16 @@ var generateStaticCss = (ctx, sheet) => {
   const engine = staticCss.process(ctx.config.staticCss ?? {}, sheet);
   if (!sheet) {
     const { optimize = true, minify } = config;
-    let css2 = engine.sheet.toCss({ optimize, minify });
+    let css = engine.sheet.toCss({ optimize, minify });
     if (ctx.hooks["cssgen:done"]) {
-      css2 = ctx.hooks["cssgen:done"]({ artifact: "static", content: css2 }) ?? css2;
+      css = ctx.hooks["cssgen:done"]({ artifact: "static", content: css }) ?? css;
     }
-    return css2;
+    return css;
   }
 };
 
 // src/artifacts/css/token-css.ts
-var import_core3 = require("@pandacss/core");
+var import_core4 = require("@pandacss/core");
 var import_postcss = __toESM(require("postcss"));
 function generateTokenCss(ctx, sheet) {
   const {
@@ -3803,33 +3674,33 @@ function generateTokenCss(ctx, sheet) {
   } = ctx;
   const root = cssVarRoot;
   const results = [];
-  for (const [key, values] of tokens.vars.entries()) {
+  for (const [key, values] of tokens.view.vars.entries()) {
     const varsObj = Object.fromEntries(values);
     if (Object.keys(varsObj).length === 0)
       continue;
     if (key === "base") {
-      const css3 = (0, import_core3.stringify)({ [root]: varsObj });
-      results.push(css3);
+      const css2 = (0, import_core4.stringify)({ [root]: varsObj });
+      results.push(css2);
     } else {
       const keys = key.split(":");
-      const css3 = (0, import_core3.stringify)(varsObj);
+      const css2 = (0, import_core4.stringify)(varsObj);
       const mapped = keys.map((key2) => conditions.get(key2)).filter(Boolean).map((condition) => {
-        const parent = (0, import_core3.extractParentSelectors)(condition);
+        const parent = (0, import_core4.extractParentSelectors)(condition);
         return parent ? `&${parent}` : condition;
       });
       const rule = getDeepestRule(root, mapped);
       if (!rule)
         continue;
-      getDeepestNode(rule)?.append(css3);
-      results.push((0, import_core3.expandNestedCss)(rule.toString()));
+      getDeepestNode(rule)?.append(css2);
+      results.push((0, import_core4.expandNestedCss)(rule.toString()));
     }
   }
-  let css2 = results.join("\n\n");
-  css2 = "\n\n" + cleanupSelectors(css2, root);
+  let css = results.join("\n\n");
+  css = "\n\n" + cleanupSelectors(css, root);
   if (ctx.hooks["cssgen:done"]) {
-    css2 = ctx.hooks["cssgen:done"]({ artifact: "tokens", content: css2 }) ?? css2;
+    css = ctx.hooks["cssgen:done"]({ artifact: "tokens", content: css }) ?? css;
   }
-  sheet.layers.tokens.append(css2);
+  sheet.layers.tokens.append(css);
 }
 function getDeepestRule(root, selectors) {
   const rule = import_postcss.default.rule({ selector: "" });
@@ -3851,8 +3722,8 @@ function getDeepestNode(node) {
   }
   return node;
 }
-function cleanupSelectors(css2, varSelector) {
-  const root = import_postcss.default.parse(css2);
+function cleanupSelectors(css, varSelector) {
+  const root = import_postcss.default.parse(css);
   root.walkRules((rule) => {
     const selectors = [];
     rule.selectors.forEach((selector) => {
@@ -3878,7 +3749,7 @@ function cleanupSelectors(css2, varSelector) {
 }
 
 // src/generator.ts
-var Generator = class extends import_core4.Context {
+var Generator = class extends import_core5.Context {
   constructor(conf) {
     super(conf);
   }
@@ -3912,14 +3783,14 @@ var Generator = class extends import_core4.Context {
   };
   getCss = (stylesheet) => {
     const sheet = stylesheet ?? this.createSheet();
-    let css2 = sheet.toCss({
+    let css = sheet.toCss({
       optimize: true,
       minify: this.config.minify
     });
     if (this.hooks["cssgen:done"]) {
-      css2 = this.hooks["cssgen:done"]({ artifact: "styles.css", content: css2 }) ?? css2;
+      css = this.hooks["cssgen:done"]({ artifact: "styles.css", content: css }) ?? css;
     }
-    return css2;
+    return css;
   };
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -183,6 +183,7 @@ function generateCssFn(ctx) {
               return { className: \`\${propKey}${separator}\${withoutSpace(value)}\` }
             }` : `(key, value) => ({ className: \`\${classNameByProp.get(key) || hypenateProperty(key)}${separator}\${withoutSpace(value)}\` })`},
         ${utility.hasShorthand ? "hasShorthand: true," : ""}
+        toHash: ${utility.toHash},
         resolveShorthand: ${utility.hasShorthand ? "resolveShorthand" : "prop => prop"},
       }
     }
@@ -225,6 +226,7 @@ function generateStringLiteralCssFn(ctx) {
         prefix: ${prefix.className ? JSON.stringify(prefix.className) : void 0},
         transform,
         hasShorthand: false,
+        toHash: ${utility.toHash},
         resolveShorthand(prop) {
           return prop
         },
@@ -382,7 +384,7 @@ var astish_mjs_default = {
 
 // src/artifacts/generated/helpers.mjs.json
 var helpers_mjs_default = {
-  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/important.ts\nvar importantRegex = /\\s*!(important)?/i;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const objects = sources.filter(Boolean);\n  return objects.reduce((prev, obj) => {\n    Object.keys(obj).forEach((key) => {\n      const prevValue = prev[key];\n      const value = obj[key];\n      if (isObject(prevValue) && isObject(value)) {\n        prev[key] = mergeProps(prevValue, value);\n      } else {\n        prev[key] = value;\n      }\n    });\n    return prev;\n  }, {});\n}\n\n// src/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/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 (Array.isArray(obj))\n    return obj.map((value) => fn(value));\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction 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, shorthand = true) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(toHash(baseArray.join(":")));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return memo((styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  });\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => 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: memo(mergeCss), assignCss };\n}\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/is-css-function.ts\nvar fns = ["min", "max", "clamp", "calc"];\nvar fnRegExp = new RegExp(`^(${fns.join("|")})\\\\(.*\\\\)`);\nvar isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v);\n\n// src/is-css-unit.ts\nvar lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";\nvar lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`;\nvar lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);\nvar isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v);\n\n// src/is-css-var.ts\nvar isCssVar = (v) => typeof v === "string" && /^var\\(--.+\\)$/.test(v);\n\n// src/pattern-fns.ts\nvar patternFns = {\n  map: mapObject,\n  isCssFunction,\n  isCssVar,\n  isCssUnit\n};\nvar getPatternStyles = (pattern, styles) => {\n  if (!pattern.defaultValues)\n    return styles;\n  const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues;\n  return Object.assign({}, defaults, compact(styles));\n};\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n  const init = (slot) => ({\n    className: [recipe.className, slot].filter(Boolean).join("__"),\n    base: recipe.base?.[slot] ?? {},\n    variants: {},\n    defaultVariants: recipe.defaultVariants ?? {},\n    compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n  });\n  const slots = recipe.slots ?? [];\n  const recipeParts = slots.map((slot) => [slot, init(slot)]);\n  for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n    for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n      recipeParts.forEach(([slot, slotRecipe]) => {\n        slotRecipe.variants[variantsKey] ??= {};\n        slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n      });\n    }\n  }\n  return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  getPatternStyles,\n  getSlotCompoundVariant,\n  getSlotRecipes,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  memo,\n  mergeProps,\n  patternFns,\n  splitProps,\n  toHash,\n  uniq,\n  walkObject,\n  withoutSpace\n};\n'
+  content: '// src/assert.ts\nfunction isObject(value) {\n  return typeof value === "object" && value != null && !Array.isArray(value);\n}\n\n// src/compact.ts\nfunction compact(value) {\n  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));\n}\n\n// src/condition.ts\nvar isBaseCondition = (v) => v === "base";\nfunction filterBaseConditions(c) {\n  return c.slice().filter((v) => !isBaseCondition(v));\n}\n\n// src/hash.ts\nfunction toChar(code) {\n  return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n  let name = "";\n  let x;\n  for (x = Math.abs(code); x > 52; x = x / 52 | 0)\n    name = toChar(x % 52) + name;\n  return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n  let i = x.length;\n  while (i)\n    h = h * 33 ^ x.charCodeAt(--i);\n  return h;\n}\nfunction toHash(value) {\n  return toName(toPhash(5381, value) >>> 0);\n}\n\n// src/important.ts\nvar importantRegex = /\\s*!(important)?/i;\nfunction isImportant(value) {\n  return typeof value === "string" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;\n}\nfunction withoutSpace(str) {\n  return typeof str === "string" ? str.replaceAll(" ", "_") : str;\n}\n\n// src/memo.ts\nvar memo = (fn) => {\n  const cache = /* @__PURE__ */ new Map();\n  const get = (...args) => {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      return cache.get(key);\n    }\n    const result = fn(...args);\n    cache.set(key, result);\n    return result;\n  };\n  return get;\n};\n\n// src/merge-props.ts\nfunction mergeProps(...sources) {\n  const objects = sources.filter(Boolean);\n  return objects.reduce((prev, obj) => {\n    Object.keys(obj).forEach((key) => {\n      const prevValue = prev[key];\n      const value = obj[key];\n      if (isObject(prevValue) && isObject(value)) {\n        prev[key] = mergeProps(prevValue, value);\n      } else {\n        prev[key] = value;\n      }\n    });\n    return prev;\n  }, {});\n}\n\n// src/walk-object.ts\nvar isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n  const { stop, getKey } = options;\n  function inner(value, path = []) {\n    if (isObject(value) || Array.isArray(value)) {\n      const result = {};\n      for (const [prop, child] of Object.entries(value)) {\n        const key = getKey?.(prop, child) ?? prop;\n        const childPath = [...path, key];\n        if (stop?.(value, childPath)) {\n          return predicate(value, path);\n        }\n        const next = inner(child, childPath);\n        if (isNotNullish(next)) {\n          result[key] = next;\n        }\n      }\n      return result;\n    }\n    return predicate(value, path);\n  }\n  return inner(target);\n}\nfunction mapObject(obj, fn) {\n  if (Array.isArray(obj))\n    return obj.map((value) => fn(value));\n  if (!isObject(obj))\n    return fn(obj);\n  return walkObject(obj, (value) => fn(value));\n}\n\n// src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n  return values.reduce((acc, current, index) => {\n    const key = breakpoints[index];\n    if (current != null) {\n      acc[key] = current;\n    }\n    return acc;\n  }, {});\n}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n  const { utility, conditions } = context;\n  const { hasShorthand, resolveShorthand } = utility;\n  return walkObject(\n    styles,\n    (value) => {\n      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n    },\n    {\n      stop: (value) => Array.isArray(value),\n      getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n    }\n  );\n}\n\n// src/classname.ts\nvar fallbackCondition = {\n  shift: (v) => v,\n  finalize: (v) => v,\n  breakpoints: { keys: [] }\n};\nvar sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\\n\\s]+/g, " ") : value;\nfunction createCss(context) {\n  const { utility, hash, conditions: conds = fallbackCondition } = context;\n  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");\n  const hashFn = (conditions, className) => {\n    let result;\n    if (hash) {\n      const baseArray = [...conds.finalize(conditions), className];\n      result = formatClassName(utility.toHash(baseArray, toHash));\n    } else {\n      const baseArray = [...conds.finalize(conditions), formatClassName(className)];\n      result = baseArray.join(":");\n    }\n    return result;\n  };\n  return memo((styleObject = {}) => {\n    const normalizedObject = normalizeStyleObject(styleObject, context);\n    const classNames = /* @__PURE__ */ new Set();\n    walkObject(normalizedObject, (value, paths) => {\n      const important = isImportant(value);\n      if (value == null)\n        return;\n      const [prop, ...allConditions] = conds.shift(paths);\n      const conditions = filterBaseConditions(allConditions);\n      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));\n      let className = hashFn(conditions, transformed.className);\n      if (important)\n        className = `${className}!`;\n      classNames.add(className);\n    });\n    return Array.from(classNames).join(" ");\n  });\n}\nfunction compactStyles(...styles) {\n  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\n}\nfunction createMergeCss(context) {\n  function resolve(styles) {\n    const allStyles = compactStyles(...styles);\n    if (allStyles.length === 1)\n      return allStyles;\n    return allStyles.map((style) => normalizeStyleObject(style, context));\n  }\n  function mergeCss(...styles) {\n    return mergeProps(...resolve(styles));\n  }\n  function assignCss(...styles) {\n    return Object.assign({}, ...resolve(styles));\n  }\n  return { mergeCss: memo(mergeCss), assignCss };\n}\n\n// src/hypenate-property.ts\nvar wordRegex = /([A-Z])/g;\nvar msRegex = /^ms-/;\nvar hypenateProperty = memo((property) => {\n  if (property.startsWith("--"))\n    return property;\n  return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();\n});\n\n// src/is-css-function.ts\nvar fns = ["min", "max", "clamp", "calc"];\nvar fnRegExp = new RegExp(`^(${fns.join("|")})\\\\(.*\\\\)`);\nvar isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v);\n\n// src/is-css-unit.ts\nvar lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";\nvar lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`;\nvar lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);\nvar isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v);\n\n// src/is-css-var.ts\nvar isCssVar = (v) => typeof v === "string" && /^var\\(--.+\\)$/.test(v);\n\n// src/pattern-fns.ts\nvar patternFns = {\n  map: mapObject,\n  isCssFunction,\n  isCssVar,\n  isCssUnit\n};\nvar getPatternStyles = (pattern, styles) => {\n  if (!pattern.defaultValues)\n    return styles;\n  const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues;\n  return Object.assign({}, defaults, compact(styles));\n};\n\n// src/slot.ts\nvar getSlotRecipes = (recipe = {}) => {\n  const init = (slot) => ({\n    className: [recipe.className, slot].filter(Boolean).join("__"),\n    base: recipe.base?.[slot] ?? {},\n    variants: {},\n    defaultVariants: recipe.defaultVariants ?? {},\n    compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n  });\n  const slots = recipe.slots ?? [];\n  const recipeParts = slots.map((slot) => [slot, init(slot)]);\n  for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {\n    for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {\n      recipeParts.forEach(([slot, slotRecipe]) => {\n        slotRecipe.variants[variantsKey] ??= {};\n        slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n      });\n    }\n  }\n  return Object.fromEntries(recipeParts);\n};\nvar getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));\n\n// src/split-props.ts\nfunction splitProps(props, ...keys) {\n  const descriptors = Object.getOwnPropertyDescriptors(props);\n  const dKeys = Object.keys(descriptors);\n  const split = (k) => {\n    const clone = {};\n    for (let i = 0; i < k.length; i++) {\n      const key = k[i];\n      if (descriptors[key]) {\n        Object.defineProperty(clone, key, descriptors[key]);\n        delete descriptors[key];\n      }\n    }\n    return clone;\n  };\n  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n  return keys.map(fn).concat(split(dKeys));\n}\n\n// src/uniq.ts\nvar uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);\nexport {\n  compact,\n  createCss,\n  createMergeCss,\n  filterBaseConditions,\n  getPatternStyles,\n  getSlotCompoundVariant,\n  getSlotRecipes,\n  hypenateProperty,\n  isBaseCondition,\n  isObject,\n  mapObject,\n  memo,\n  mergeProps,\n  patternFns,\n  splitProps,\n  toHash,\n  uniq,\n  walkObject,\n  withoutSpace\n};\n'
 };
 
 // src/artifacts/generated/normalize-html.mjs.json
@@ -587,13 +589,7 @@ import { match as match4 } from "ts-pattern";
 var stringify2 = (value) => JSON.stringify(value, null, 2);
 var isBooleanValue = (value) => value === "true" || value === "false";
 function generateCreateRecipe(ctx) {
-  const {
-    conditions,
-    recipes,
-    prefix,
-    hash,
-    utility: { separator }
-  } = ctx;
+  const { conditions, recipes, prefix, hash, utility } = ctx;
   if (recipes.isEmpty())
     return;
   return {
@@ -624,7 +620,7 @@ function generateCreateRecipe(ctx) {
          }
 
          value = withoutSpace(value)
-         return { className: \`\${name}--\${prop}${separator}\${value}\` }
+         return { className: \`\${name}--\${prop}${utility.separator}\${value}\` }
       }
 
       const recipeCss = createCss({
@@ -636,6 +632,7 @@ function generateCreateRecipe(ctx) {
         },
         utility: {
           ${prefix.className ? "prefix: " + JSON.stringify(prefix.className) + "," : ""}
+          toHash: ${utility.toHash},
           transform,
         }
       })
@@ -2990,16 +2987,16 @@ function generateTokenTypes(ctx) {
     config: { theme }
   } = ctx;
   const set = /* @__PURE__ */ new Set();
-  set.add(`export type Token = ${tokens.isEmpty ? "string" : unionType3(tokens.allNames)}`);
+  set.add(`export type Token = ${tokens.isEmpty ? "string" : unionType3(Array.from(tokens.byName.keys()))}`);
   const result = /* @__PURE__ */ new Set(["export type Tokens = {"]);
   if (tokens.isEmpty) {
     result.add("[token: string]: string");
   } else {
-    const colorPaletteKeys = Object.keys(tokens.colorPalettes);
+    const colorPaletteKeys = Array.from(tokens.view.colorPalettes.keys());
     if (colorPaletteKeys.length) {
-      set.add(`export type ColorPalette = ${unionType3(Object.keys(tokens.colorPalettes))}`);
+      set.add(`export type ColorPalette = ${unionType3(colorPaletteKeys)}`);
     }
-    for (const [key, value] of tokens.categoryMap.entries()) {
+    for (const [key, value] of tokens.view.categoryMap.entries()) {
       const typeName = capitalize(pluralize.singular(key));
       set.add(`export type ${typeName}Token = ${unionType3(value.keys())}`);
       result.add(`		${key}: ${typeName}Token`);
@@ -3410,8 +3407,8 @@ var entries = [
 var getMatchingArtifacts = (ctx, filters) => {
   const ids = filters?.ids;
   if (!ids)
-    return entries.map(([_artifactId, fn]) => fn(ctx));
-  return entries.filter(([artifactId]) => ids.includes(artifactId)).map(([_artifactId, fn]) => fn(ctx, filters));
+    return entries.map(([_artifactId, fn]) => fn(ctx)).filter(Boolean);
+  return entries.filter(([artifactId]) => ids.includes(artifactId)).map(([_artifactId, fn]) => fn(ctx, filters)).filter(Boolean);
 };
 var transformArtifact = (ctx, artifact) => {
   const files = (artifact?.files ?? []).filter((item) => !!item?.code).map((item) => {
@@ -3433,7 +3430,7 @@ var setupArtifacts = (ctx, ids) => {
 // src/artifacts/index.ts
 var generateArtifacts = (ctx, ids) => {
   if (ctx.config.emitTokensOnly) {
-    return [setupDesignTokens(ctx)];
+    return [setupDesignTokens(ctx)].filter(Boolean);
   }
   return setupArtifacts(ctx, ids);
 };
@@ -3487,11 +3484,11 @@ function generateKeyframeCss(ctx, sheet) {
   for (const [name, definition] of Object.entries(keyframes)) {
     result[`@keyframes ${name}`] = definition;
   }
-  let css2 = stringify3(sheet.serialize(result));
+  let css = stringify3(sheet.serialize(result));
   if (ctx.hooks["cssgen:done"]) {
-    css2 = ctx.hooks["cssgen:done"]({ artifact: "keyframes", content: css2 }) ?? css2;
+    css = ctx.hooks["cssgen:done"]({ artifact: "keyframes", content: css }) ?? css;
   }
-  sheet.layers.tokens.append(css2);
+  sheet.layers.tokens.append(css);
 }
 
 // src/artifacts/css/parser-css.ts
@@ -3503,8 +3500,8 @@ var generateParserCss = (ctx, decoder) => {
   const { minify, optimize } = ctx.config;
   sheet.processDecoder(decoder);
   try {
-    const css2 = sheet.toCss({ minify, optimize });
-    return css2;
+    const css = sheet.toCss({ minify, optimize });
+    return css;
   } catch (err) {
     logger.error("serializer:css", "Failed to serialize CSS: " + err);
     return "";
@@ -3512,234 +3509,108 @@ var generateParserCss = (ctx, decoder) => {
 };
 
 // src/artifacts/css/reset-css.ts
+import "@pandacss/core";
 import { isObject } from "@pandacss/shared";
-var css = String.raw;
 function generateResetCss(ctx, sheet) {
   const { preflight } = ctx.config;
   const scope = isObject(preflight) ? preflight.scope : void 0;
   const selector = scope ? `${scope} ` : "";
-  let output = css`
-  ${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);
-  }
-
-  ${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-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -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;
-  }
-
-  body {
-    height: 100%;
-    line-height: inherit;
-  }
-
-  ${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}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}ol,
-  ${selector}ul {
-    list-style: none;
-  }
-
-  ${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}input,
-  ${selector}optgroup,
-  ${selector}select,
-  ${selector}textarea {
-    color: inherit;
-  }
-
-  ${selector}button,
-  ${selector}select {
-    text-transform: none;
-  }
-
-  ${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}textarea {
-    resize: vertical;
-  }
-
-  ${selector}summary {
-    display: list-item;
-  }
-
-  ${selector}small {
-    font-size: 80%;
-  }
-
-  ${selector}sub,
-  ${selector}sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-
-  ${selector}sub {
-    bottom: -0.25em;
-  }
-
-  ${selector}sup {
-    top: -0.5em;
-  }
-
-  ${selector}dialog {
-    padding: 0;
-  }
-
-  ${selector}a {
-    color: inherit;
-    text-decoration: inherit;
-  }
-
-  ${selector}abbr:where([title]) {
-    text-decoration: underline dotted;
-  }
-
-  ${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-mono-fallback));
-  }
-
-
-  ${selector}input[type="text"],
-  ${selector}input[type="email"],
-  ${selector}input[type="search"],
-  ${selector}input[type="password"] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-  }
-
-  ${selector}input[type='search'] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
-  }
-
-  ${selector}::-webkit-search-decoration,
-  ${selector}::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-  }
-
-  ${selector}::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    font: inherit;
-  }
-
-  ${selector}input[type="number"]::-webkit-inner-spin-button,
-  ${selector}input[type="number"]::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  ${selector}input[type='number']{
-    -moz-appearance: textfield;
-  }
-
-  ${selector}:-moz-ui-invalid {
-    box-shadow: none;
-  }
-
-  ${selector}:-moz-focusring {
-    outline: auto;
-  }
-
-  ${selector}[hidden] {
-    display: none !important;
-  }
-`;
-  if (ctx.hooks["cssgen:done"]) {
-    output = ctx.hooks["cssgen:done"]({ artifact: "reset", content: output }) ?? output;
+  const scoped = {
+    "*": { margin: "0px", padding: "0px", font: "inherit" },
+    "*, *::before, *::after": {
+      boxSizing: "border-box",
+      borderWidth: "0px",
+      borderStyle: "solid",
+      borderColor: "var(--global-color-border, currentColor)"
+    },
+    hr: { height: "0px", color: "inherit", borderTopWidth: "1px" },
+    body: { height: "100%", lineHeight: "inherit" },
+    img: { borderStyle: "none" },
+    "img,  svg,  video,  canvas,  audio,  iframe,  embed,  object": {
+      display: "block",
+      verticalAlign: "middle"
+    },
+    "img,  video": { maxWidth: "100%", height: "auto" },
+    "p,  h1,  h2,  h3,  h4,  h5,  h6": { overflowWrap: "break-word" },
+    "ol,  ul": { listStyle: "none" },
+    "code,  kbd,  pre,  samp": { fontSize: "1em" },
+    "button,  [type='button'],  [type='reset'],  [type='submit']": {
+      WebkitAppearance: "button",
+      backgroundColor: "transparent",
+      backgroundImage: "none"
+    },
+    "button,  input,  optgroup,  select,  textarea": { color: "inherit" },
+    "button,  select": { textTransform: "none" },
+    table: {
+      textIndent: "0px",
+      borderColor: "inherit",
+      borderCollapse: "collapse"
+    },
+    "input::placeholder,  textarea::placeholder": {
+      opacity: 1,
+      color: "var(--global-color-placeholder, #9ca3af)"
+    },
+    textarea: { resize: "vertical" },
+    summary: { display: "list-item" },
+    small: { fontSize: "80%" },
+    "sub,  sup": {
+      fontSize: "75%",
+      lineHeight: 0,
+      position: "relative",
+      verticalAlign: "baseline"
+    },
+    sub: { bottom: "-0.25em" },
+    sup: { top: "-0.5em" },
+    dialog: { padding: "0px" },
+    a: { color: "inherit", textDecoration: "inherit" },
+    "abbr:where([title])": { textDecoration: "underline dotted" },
+    "b,  strong": { fontWeight: "bolder" },
+    "code,  kbd,  samp,  pre": {
+      fontSize: "1em",
+      "--font-mono-fallback": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New'",
+      fontFamily: "var(--global-font-mono, var(--font-mono-fallback))"
+    },
+    'input[type="text"],  input[type="email"],  input[type="search"],  input[type="password"]': {
+      WebkitAppearance: "none",
+      MozAppearance: "none"
+    },
+    "input[type='search']": {
+      WebkitAppearance: "textfield",
+      outlineOffset: "-2px"
+    },
+    "::-webkit-search-decoration,  ::-webkit-search-cancel-button": {
+      WebkitAppearance: "none"
+    },
+    "::-webkit-file-upload-button": {
+      WebkitAppearance: "button",
+      font: "inherit"
+    },
+    'input[type="number"]::-webkit-inner-spin-button,  input[type="number"]::-webkit-outer-spin-button': {
+      height: "auto"
+    },
+    "input[type='number']": { MozAppearance: "textfield" },
+    ":-moz-ui-invalid": { boxShadow: "none" },
+    ":-moz-focusring": { outline: "auto" },
+    "[hidden]": { display: "none !important" }
+  };
+  const reset = {
+    [scope || "html"]: {
+      lineHeight: 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'",
+      WebkitTextSizeAdjust: "100%",
+      WebkitFontSmoothing: "antialiased",
+      MozOsxFontSmoothing: "grayscale",
+      MozTabSize: "[4]",
+      tabSize: "[4]",
+      fontFamily: "var(--global-font-body, var(--font-fallback))"
+    }
+  };
+  if (selector) {
+    reset[selector] = scoped;
+  } else {
+    Object.assign(reset, scoped);
   }
-  sheet.layers.reset.append(output);
+  sheet.processResetCss(reset);
 }
 
 // src/artifacts/css/static-css.ts
@@ -3748,11 +3619,11 @@ var generateStaticCss = (ctx, sheet) => {
   const engine = staticCss.process(ctx.config.staticCss ?? {}, sheet);
   if (!sheet) {
     const { optimize = true, minify } = config;
-    let css2 = engine.sheet.toCss({ optimize, minify });
+    let css = engine.sheet.toCss({ optimize, minify });
     if (ctx.hooks["cssgen:done"]) {
-      css2 = ctx.hooks["cssgen:done"]({ artifact: "static", content: css2 }) ?? css2;
+      css = ctx.hooks["cssgen:done"]({ artifact: "static", content: css }) ?? css;
     }
-    return css2;
+    return css;
   }
 };
 
@@ -3767,16 +3638,16 @@ function generateTokenCss(ctx, sheet) {
   } = ctx;
   const root = cssVarRoot;
   const results = [];
-  for (const [key, values] of tokens.vars.entries()) {
+  for (const [key, values] of tokens.view.vars.entries()) {
     const varsObj = Object.fromEntries(values);
     if (Object.keys(varsObj).length === 0)
       continue;
     if (key === "base") {
-      const css3 = stringify4({ [root]: varsObj });
-      results.push(css3);
+      const css2 = stringify4({ [root]: varsObj });
+      results.push(css2);
     } else {
       const keys = key.split(":");
-      const css3 = stringify4(varsObj);
+      const css2 = stringify4(varsObj);
       const mapped = keys.map((key2) => conditions.get(key2)).filter(Boolean).map((condition) => {
         const parent = extractParentSelectors(condition);
         return parent ? `&${parent}` : condition;
@@ -3784,16 +3655,16 @@ function generateTokenCss(ctx, sheet) {
       const rule = getDeepestRule(root, mapped);
       if (!rule)
         continue;
-      getDeepestNode(rule)?.append(css3);
+      getDeepestNode(rule)?.append(css2);
       results.push(expandNestedCss(rule.toString()));
     }
   }
-  let css2 = results.join("\n\n");
-  css2 = "\n\n" + cleanupSelectors(css2, root);
+  let css = results.join("\n\n");
+  css = "\n\n" + cleanupSelectors(css, root);
   if (ctx.hooks["cssgen:done"]) {
-    css2 = ctx.hooks["cssgen:done"]({ artifact: "tokens", content: css2 }) ?? css2;
+    css = ctx.hooks["cssgen:done"]({ artifact: "tokens", content: css }) ?? css;
   }
-  sheet.layers.tokens.append(css2);
+  sheet.layers.tokens.append(css);
 }
 function getDeepestRule(root, selectors) {
   const rule = postcss.rule({ selector: "" });
@@ -3815,8 +3686,8 @@ function getDeepestNode(node) {
   }
   return node;
 }
-function cleanupSelectors(css2, varSelector) {
-  const root = postcss.parse(css2);
+function cleanupSelectors(css, varSelector) {
+  const root = postcss.parse(css);
   root.walkRules((rule) => {
     const selectors = [];
     rule.selectors.forEach((selector) => {
@@ -3876,14 +3747,14 @@ var Generator = class extends Context2 {
   };
   getCss = (stylesheet) => {
     const sheet = stylesheet ?? this.createSheet();
-    let css2 = sheet.toCss({
+    let css = sheet.toCss({
       optimize: true,
       minify: this.config.minify
     });
     if (this.hooks["cssgen:done"]) {
-      css2 = this.hooks["cssgen:done"]({ artifact: "styles.css", content: css2 }) ?? css2;
+      css = this.hooks["cssgen:done"]({ artifact: "styles.css", content: css }) ?? css;
     }
-    return css2;
+    return css;
   };
 };
 export {

package/package.json

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