@pandacss/studio 0.0.0-dev-20240130133424 → 0.0.0-dev-20240201185610

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.0.0-dev-20240130133424",
+  "version": "0.0.0-dev-20240201185610",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -48,12 +48,12 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "5.0.12",
-    "@pandacss/config": "0.0.0-dev-20240130133424",
-    "@pandacss/logger": "0.0.0-dev-20240130133424",
-    "@pandacss/shared": "0.0.0-dev-20240130133424",
-    "@pandacss/token-dictionary": "0.0.0-dev-20240130133424",
-    "@pandacss/types": "0.0.0-dev-20240130133424",
-    "@pandacss/astro-plugin-studio": "0.0.0-dev-20240130133424"
+    "@pandacss/config": "0.0.0-dev-20240201185610",
+    "@pandacss/logger": "0.0.0-dev-20240201185610",
+    "@pandacss/shared": "0.0.0-dev-20240201185610",
+    "@pandacss/token-dictionary": "0.0.0-dev-20240201185610",
+    "@pandacss/types": "0.0.0-dev-20240201185610",
+    "@pandacss/astro-plugin-studio": "0.0.0-dev-20240201185610"
   },
   "devDependencies": {
     "@types/react": "18.2.42",

package/src/components/typography-playground.tsx

@@ -7,7 +7,7 @@ import { Select } from './input'
 import { TokenContent } from './token-content'
 import { TokenGroup } from './token-group'
 
-const tokens = Object.fromEntries<Map<string, Token> | undefined>(context.tokens.categoryMap)
+const tokens = Object.fromEntries<Map<string, Token> | undefined>(context.tokens.view.categoryMap)
 
 const defaultConfig = {
   fontSize: '',
@@ -39,7 +39,7 @@ export default function TypographyPlayground() {
     updateConfig(key, event.currentTarget.value)
   }
 
-  const renderTokenSwitch = (token: any) => {
+  const renderTokenSwitch = (token: keyof typeof defaultConfig) => {
     const currentTokens = tokens[`${token}s`]
     if (!currentTokens) return
     const values = Array.from(currentTokens.values())

package/src/lib/panda-context.ts

@@ -5,10 +5,10 @@ import { config } from 'virtual:panda'
 
 export const theme = config.theme ?? {}
 
-export const tokens = new TokenDictionary(theme)
+export const tokens = new TokenDictionary(theme).init()
 
 export const getTokens = (category: keyof TokenDataTypes): Token[] => {
-  const map = tokens.categoryMap.get(category) ?? new Map()
+  const map = tokens.view.categoryMap.get(category) ?? new Map()
   return Array.from(map.values())
 }
 

package/styled-system/css/css.mjs

@@ -33,6 +33,7 @@ const context = {
               return { className: `${propKey}_${withoutSpace(value)}` }
             },
     hasShorthand: true,
+    toHash: (path, hashFn) => hashFn(path.join(":")),
     resolveShorthand: resolveShorthand,
   }
 }

package/styled-system/helpers.mjs

@@ -14,18 +14,6 @@ function filterBaseConditions(c) {
   return c.slice().filter((v) => !isBaseCondition(v));
 }
 
-// src/important.ts
-var importantRegex = /\s*!(important)?/i;
-function isImportant(value) {
-  return typeof value === "string" ? importantRegex.test(value) : false;
-}
-function withoutImportant(value) {
-  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;
-}
-function withoutSpace(str) {
-  return typeof str === "string" ? str.replaceAll(" ", "_") : str;
-}
-
 // src/hash.ts
 function toChar(code) {
   return String.fromCharCode(code + (code > 25 ? 39 : 97));
@@ -47,21 +35,16 @@ function toHash(value) {
   return toName(toPhash(5381, value) >>> 0);
 }
 
-// src/merge-props.ts
-function mergeProps(...sources) {
-  const objects = sources.filter(Boolean);
-  return objects.reduce((prev, obj) => {
-    Object.keys(obj).forEach((key) => {
-      const prevValue = prev[key];
-      const value = obj[key];
-      if (isObject(prevValue) && isObject(value)) {
-        prev[key] = mergeProps(prevValue, value);
-      } else {
-        prev[key] = value;
-      }
-    });
-    return prev;
-  }, {});
+// src/important.ts
+var importantRegex = /\s*!(important)?/i;
+function isImportant(value) {
+  return typeof value === "string" ? importantRegex.test(value) : false;
+}
+function withoutImportant(value) {
+  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;
+}
+function withoutSpace(str) {
+  return typeof str === "string" ? str.replaceAll(" ", "_") : str;
 }
 
 // src/memo.ts
@@ -79,6 +62,23 @@ var memo = (fn) => {
   return get;
 };
 
+// src/merge-props.ts
+function mergeProps(...sources) {
+  const objects = sources.filter(Boolean);
+  return objects.reduce((prev, obj) => {
+    Object.keys(obj).forEach((key) => {
+      const prevValue = prev[key];
+      const value = obj[key];
+      if (isObject(prevValue) && isObject(value)) {
+        prev[key] = mergeProps(prevValue, value);
+      } else {
+        prev[key] = value;
+      }
+    });
+    return prev;
+  }, {});
+}
+
 // src/walk-object.ts
 var isNotNullish = (element) => element != null;
 function walkObject(target, predicate, options = {}) {
@@ -158,7 +158,7 @@ function createCss(context) {
     let result;
     if (hash) {
       const baseArray = [...conds.finalize(conditions), className];
-      result = formatClassName(toHash(baseArray.join(":")));
+      result = formatClassName(utility.toHash(baseArray, toHash));
     } else {
       const baseArray = [...conds.finalize(conditions), formatClassName(className)];
       result = baseArray.join(":");