@pandacss/studio 0.12.1 → 0.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -33,19 +33,19 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "4.4.9",
-    "@pandacss/types": "0.12.1",
-    "@pandacss/config": "0.12.1",
-    "@pandacss/shared": "0.12.1",
-    "@pandacss/token-dictionary": "0.12.1",
-    "@pandacss/logger": "0.12.1",
-    "@pandacss/node": "0.12.1"
+    "@pandacss/types": "0.12.2",
+    "@pandacss/config": "0.12.2",
+    "@pandacss/shared": "0.12.2",
+    "@pandacss/token-dictionary": "0.12.2",
+    "@pandacss/logger": "0.12.2",
+    "@pandacss/node": "0.12.2"
   },
   "devDependencies": {
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "@vitejs/plugin-react": "4.0.4",
     "execa": "7.2.0",
-    "@pandacss/dev": "0.12.1"
+    "@pandacss/dev": "0.12.2"
   },
   "scripts": {
     "codegen": "panda",

package/styled-system/css/css.d.ts

@@ -2,7 +2,7 @@
 import type { SystemStyleObject } from '../types'
 
 interface CssFunction {
-  (styles: SystemStyleObject): string
+  (...styles: SystemStyleObject[]): string
   raw: (styles: SystemStyleObject) => SystemStyleObject
 }
 

package/styled-system/css/css.mjs

@@ -37,12 +37,7 @@ const context = {
 }
 
 const cssFn = createCss(context)
-export const cssCache = new Map()
-export const css = (styles) => {
-  const classNames = cssFn(styles)
-  cssCache.set(classNames, styles)
-  return classNames
-}
+export const css = (...styles) => cssFn(mergeCss(...styles))
 css.raw = (styles) => styles
 
 export const { mergeCss, assignCss } = createMergeCss(context)

package/styled-system/css/cva.mjs

@@ -4,7 +4,7 @@ import { css, mergeCss } from './css.mjs'
 export function cva(config) {
   const { base = {}, variants = {}, defaultVariants = {}, compoundVariants = [] } = config
 
-  function resolve(props) {
+  function resolve(props = {}) {
     const computedVariants = { ...defaultVariants, ...compact(props) }
     let variantCss = { ...base }
     for (const [key, value] of Object.entries(computedVariants)) {
@@ -32,7 +32,7 @@ export function cva(config) {
     __cva__: true,
     variantMap,
     variantKeys,
-    resolve,
+    raw: resolve,
     config,
     splitVariantProps,
   })

package/styled-system/css/cx.mjs

@@ -1,26 +1,15 @@
-import { cssCache, css, mergeCss } from './css.mjs'
-
 function cx() {
-  const objs = []
   let str = '',
     i = 0,
     arg
 
   for (; i < arguments.length; ) {
-    arg = arguments[i++]
-    if (!arg || typeof arg !== 'string') continue
-
-    if (cssCache.has(arg)) {
-      objs.push(cssCache.get(arg))
-      continue
+    if ((arg = arguments[i++]) && typeof arg === 'string') {
+      str && (str += ' ')
+      str += arg
     }
-
-    str && (str += ' ')
-    str += arg.toString()
   }
-
-  const merged = mergeCss(...objs)
-  return [css(merged), str].join(' ')
+  return str
 }
 
 export { cx }

package/styled-system/css/sva.mjs

@@ -1,4 +1,4 @@
-import { getSlotRecipes } from '../helpers.mjs'
+import { getSlotRecipes, splitProps } from '../helpers.mjs'
 import { cva } from './cva.mjs'
 
 export function sva(config) {
@@ -9,12 +9,19 @@ export function sva(config) {
     return Object.fromEntries(result)
   }
 
-  const [, firstCva] = slots[0]
+  const variants = config.variants ?? {}
+  const variantKeys = Object.keys(variants)
+
+  function splitVariantProps(props) {
+    return splitProps(props, variantKeys)
+  }
+
+  const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]))
 
   return Object.assign(svaFn, {
     __cva__: false,
-    variantMap: firstCva.variantMap,
-    variantKeys: firstCva.variantKeys,
-    splitVariantProps: firstCva.splitVariantProps,
+    variantMap,
+    variantKeys,
+    splitVariantProps,
   })
 }

package/styled-system/jsx/factory.mjs

@@ -21,7 +21,7 @@ function styledFn(Dynamic, configOrCva = {}) {
 
     function cvaClass() {
       const { css: cssStyles, ...propStyles } = styleProps
-      const cvaStyles = cvaFn.resolve(variantProps)
+      const cvaStyles = cvaFn.raw(variantProps)
       const styles = assignCss(cvaStyles, propStyles, cssStyles)
       return cx(css(styles), elementProps.className)
     }

package/styled-system/patterns/aspect-ratio.d.ts

@@ -14,7 +14,7 @@ type AspectRatioStyles = AspectRatioProperties & DistributiveOmit<SystemStyleObj
 
 interface AspectRatioPatternFn {
   (styles?: AspectRatioStyles): string
-  raw: (styles: AspectRatioStyles) => AspectRatioStyles
+  raw: (styles: AspectRatioStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/aspect-ratio.mjs

@@ -33,4 +33,4 @@ const aspectRatioConfig = {
 export const getAspectRatioStyle = (styles = {}) => aspectRatioConfig.transform(styles, { map: mapObject })
 
 export const aspectRatio = (styles) => css(getAspectRatioStyle(styles))
-aspectRatio.raw = (styles) => styles
+aspectRatio.raw = getAspectRatioStyle

package/styled-system/patterns/bleed.d.ts

@@ -15,7 +15,7 @@ type BleedStyles = BleedProperties & DistributiveOmit<SystemStyleObject, keyof B
 
 interface BleedPatternFn {
   (styles?: BleedStyles): string
-  raw: (styles: BleedStyles) => BleedStyles
+  raw: (styles: BleedStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/bleed.mjs

@@ -17,4 +17,4 @@ const bleedConfig = {
 export const getBleedStyle = (styles = {}) => bleedConfig.transform(styles, { map: mapObject })
 
 export const bleed = (styles) => css(getBleedStyle(styles))
-bleed.raw = (styles) => styles
+bleed.raw = getBleedStyle

package/styled-system/patterns/box.d.ts

@@ -14,7 +14,7 @@ type BoxStyles = BoxProperties & DistributiveOmit<SystemStyleObject, keyof BoxPr
 
 interface BoxPatternFn {
   (styles?: BoxStyles): string
-  raw: (styles: BoxStyles) => BoxStyles
+  raw: (styles: BoxStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/box.mjs

@@ -10,4 +10,4 @@ const boxConfig = {
 export const getBoxStyle = (styles = {}) => boxConfig.transform(styles, { map: mapObject })
 
 export const box = (styles) => css(getBoxStyle(styles))
-box.raw = (styles) => styles
+box.raw = getBoxStyle

package/styled-system/patterns/center.d.ts

@@ -14,7 +14,7 @@ type CenterStyles = CenterProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface CenterPatternFn {
   (styles?: CenterStyles): string
-  raw: (styles: CenterStyles) => CenterStyles
+  raw: (styles: CenterStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/center.mjs

@@ -16,4 +16,4 @@ const centerConfig = {
 export const getCenterStyle = (styles = {}) => centerConfig.transform(styles, { map: mapObject })
 
 export const center = (styles) => css(getCenterStyle(styles))
-center.raw = (styles) => styles
+center.raw = getCenterStyle

package/styled-system/patterns/circle.d.ts

@@ -14,7 +14,7 @@ type CircleStyles = CircleProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface CirclePatternFn {
   (styles?: CircleStyles): string
-  raw: (styles: CircleStyles) => CircleStyles
+  raw: (styles: CircleStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/circle.mjs

@@ -20,4 +20,4 @@ const circleConfig = {
 export const getCircleStyle = (styles = {}) => circleConfig.transform(styles, { map: mapObject })
 
 export const circle = (styles) => css(getCircleStyle(styles))
-circle.raw = (styles) => styles
+circle.raw = getCircleStyle

package/styled-system/patterns/container.d.ts

@@ -14,7 +14,7 @@ type ContainerStyles = ContainerProperties & DistributiveOmit<SystemStyleObject,
 
 interface ContainerPatternFn {
   (styles?: ContainerStyles): string
-  raw: (styles: ContainerStyles) => ContainerStyles
+  raw: (styles: ContainerStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/container.mjs

@@ -16,4 +16,4 @@ const containerConfig = {
 export const getContainerStyle = (styles = {}) => containerConfig.transform(styles, { map: mapObject })
 
 export const container = (styles) => css(getContainerStyle(styles))
-container.raw = (styles) => styles
+container.raw = getContainerStyle

package/styled-system/patterns/divider.d.ts

@@ -16,7 +16,7 @@ type DividerStyles = DividerProperties & DistributiveOmit<SystemStyleObject, key
 
 interface DividerPatternFn {
   (styles?: DividerStyles): string
-  raw: (styles: DividerStyles) => DividerStyles
+  raw: (styles: DividerStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/divider.mjs

@@ -19,4 +19,4 @@ const dividerConfig = {
 export const getDividerStyle = (styles = {}) => dividerConfig.transform(styles, { map: mapObject })
 
 export const divider = (styles) => css(getDividerStyle(styles))
-divider.raw = (styles) => styles
+divider.raw = getDividerStyle

package/styled-system/patterns/flex.d.ts

@@ -20,7 +20,7 @@ type FlexStyles = FlexProperties & DistributiveOmit<SystemStyleObject, keyof Fle
 
 interface FlexPatternFn {
   (styles?: FlexStyles): string
-  raw: (styles: FlexStyles) => FlexStyles
+  raw: (styles: FlexStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/flex.mjs

@@ -21,4 +21,4 @@ const flexConfig = {
 export const getFlexStyle = (styles = {}) => flexConfig.transform(styles, { map: mapObject })
 
 export const flex = (styles) => css(getFlexStyle(styles))
-flex.raw = (styles) => styles
+flex.raw = getFlexStyle

package/styled-system/patterns/float.d.ts

@@ -17,7 +17,7 @@ type FloatStyles = FloatProperties & DistributiveOmit<SystemStyleObject, keyof F
 
 interface FloatPatternFn {
   (styles?: FloatStyles): string
-  raw: (styles: FloatStyles) => FloatStyles
+  raw: (styles: FloatStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/float.mjs

@@ -43,4 +43,4 @@ const floatConfig = {
 export const getFloatStyle = (styles = {}) => floatConfig.transform(styles, { map: mapObject })
 
 export const float = (styles) => css(getFloatStyle(styles))
-float.raw = (styles) => styles
+float.raw = getFloatStyle

package/styled-system/patterns/grid-item.d.ts

@@ -19,7 +19,7 @@ type GridItemStyles = GridItemProperties & DistributiveOmit<SystemStyleObject, k
 
 interface GridItemPatternFn {
   (styles?: GridItemStyles): string
-  raw: (styles: GridItemStyles) => GridItemStyles
+  raw: (styles: GridItemStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/grid-item.mjs

@@ -20,4 +20,4 @@ const gridItemConfig = {
 export const getGridItemStyle = (styles = {}) => gridItemConfig.transform(styles, { map: mapObject })
 
 export const gridItem = (styles) => css(getGridItemStyle(styles))
-gridItem.raw = (styles) => styles
+gridItem.raw = getGridItemStyle

package/styled-system/patterns/grid.d.ts

@@ -18,7 +18,7 @@ type GridStyles = GridProperties & DistributiveOmit<SystemStyleObject, keyof Gri
 
 interface GridPatternFn {
   (styles?: GridStyles): string
-  raw: (styles: GridStyles) => GridStyles
+  raw: (styles: GridStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/grid.mjs

@@ -23,4 +23,4 @@ const gridConfig = {
 export const getGridStyle = (styles = {}) => gridConfig.transform(styles, { map: mapObject })
 
 export const grid = (styles) => css(getGridStyle(styles))
-grid.raw = (styles) => styles
+grid.raw = getGridStyle

package/styled-system/patterns/hstack.d.ts

@@ -15,7 +15,7 @@ type HstackStyles = HstackProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface HstackPatternFn {
   (styles?: HstackStyles): string
-  raw: (styles: HstackStyles) => HstackStyles
+  raw: (styles: HstackStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/hstack.mjs

@@ -18,4 +18,4 @@ const hstackConfig = {
 export const getHstackStyle = (styles = {}) => hstackConfig.transform(styles, { map: mapObject })
 
 export const hstack = (styles) => css(getHstackStyle(styles))
-hstack.raw = (styles) => styles
+hstack.raw = getHstackStyle

package/styled-system/patterns/link-box.d.ts

@@ -14,7 +14,7 @@ type LinkBoxStyles = LinkBoxProperties & DistributiveOmit<SystemStyleObject, key
 
 interface LinkBoxPatternFn {
   (styles?: LinkBoxStyles): string
-  raw: (styles: LinkBoxStyles) => LinkBoxStyles
+  raw: (styles: LinkBoxStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/link-box.mjs

@@ -17,4 +17,4 @@ const linkBoxConfig = {
 export const getLinkBoxStyle = (styles = {}) => linkBoxConfig.transform(styles, { map: mapObject })
 
 export const linkBox = (styles) => css(getLinkBoxStyle(styles))
-linkBox.raw = (styles) => styles
+linkBox.raw = getLinkBoxStyle

package/styled-system/patterns/link-overlay.d.ts

@@ -14,7 +14,7 @@ type LinkOverlayStyles = LinkOverlayProperties & DistributiveOmit<SystemStyleObj
 
 interface LinkOverlayPatternFn {
   (styles?: LinkOverlayStyles): string
-  raw: (styles: LinkOverlayStyles) => LinkOverlayStyles
+  raw: (styles: LinkOverlayStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/link-overlay.mjs

@@ -22,4 +22,4 @@ const linkOverlayConfig = {
 export const getLinkOverlayStyle = (styles = {}) => linkOverlayConfig.transform(styles, { map: mapObject })
 
 export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles))
-linkOverlay.raw = (styles) => styles
+linkOverlay.raw = getLinkOverlayStyle

package/styled-system/patterns/spacer.d.ts

@@ -14,7 +14,7 @@ type SpacerStyles = SpacerProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface SpacerPatternFn {
   (styles?: SpacerStyles): string
-  raw: (styles: SpacerStyles) => SpacerStyles
+  raw: (styles: SpacerStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/spacer.mjs

@@ -16,4 +16,4 @@ const spacerConfig = {
 export const getSpacerStyle = (styles = {}) => spacerConfig.transform(styles, { map: mapObject })
 
 export const spacer = (styles) => css(getSpacerStyle(styles))
-spacer.raw = (styles) => styles
+spacer.raw = getSpacerStyle

package/styled-system/patterns/square.d.ts

@@ -14,7 +14,7 @@ type SquareStyles = SquareProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface SquarePatternFn {
   (styles?: SquareStyles): string
-  raw: (styles: SquareStyles) => SquareStyles
+  raw: (styles: SquareStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/square.mjs

@@ -19,4 +19,4 @@ const squareConfig = {
 export const getSquareStyle = (styles = {}) => squareConfig.transform(styles, { map: mapObject })
 
 export const square = (styles) => css(getSquareStyle(styles))
-square.raw = (styles) => styles
+square.raw = getSquareStyle

package/styled-system/patterns/stack.d.ts

@@ -17,7 +17,7 @@ type StackStyles = StackProperties & DistributiveOmit<SystemStyleObject, keyof S
 
 interface StackPatternFn {
   (styles?: StackStyles): string
-  raw: (styles: StackStyles) => StackStyles
+  raw: (styles: StackStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/stack.mjs

@@ -18,4 +18,4 @@ const stackConfig = {
 export const getStackStyle = (styles = {}) => stackConfig.transform(styles, { map: mapObject })
 
 export const stack = (styles) => css(getStackStyle(styles))
-stack.raw = (styles) => styles
+stack.raw = getStackStyle

package/styled-system/patterns/styled-link.d.ts

@@ -14,7 +14,7 @@ type StyledLinkStyles = StyledLinkProperties & DistributiveOmit<SystemStyleObjec
 
 interface StyledLinkPatternFn {
   (styles?: StyledLinkStyles): string
-  raw: (styles: StyledLinkStyles) => StyledLinkStyles
+  raw: (styles: StyledLinkStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/styled-link.mjs

@@ -16,4 +16,4 @@ const styledLinkConfig = {
 export const getStyledLinkStyle = (styles = {}) => styledLinkConfig.transform(styles, { map: mapObject })
 
 export const styledLink = (styles) => css(getStyledLinkStyle(styles))
-styledLink.raw = (styles) => styles
+styledLink.raw = getStyledLinkStyle

package/styled-system/patterns/visually-hidden.d.ts

@@ -14,7 +14,7 @@ type VisuallyHiddenStyles = VisuallyHiddenProperties & DistributiveOmit<SystemSt
 
 interface VisuallyHiddenPatternFn {
   (styles?: VisuallyHiddenStyles): string
-  raw: (styles: VisuallyHiddenStyles) => VisuallyHiddenStyles
+  raw: (styles: VisuallyHiddenStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/visually-hidden.mjs

@@ -13,4 +13,4 @@ const visuallyHiddenConfig = {
 export const getVisuallyHiddenStyle = (styles = {}) => visuallyHiddenConfig.transform(styles, { map: mapObject })
 
 export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles))
-visuallyHidden.raw = (styles) => styles
+visuallyHidden.raw = getVisuallyHiddenStyle

package/styled-system/patterns/vstack.d.ts

@@ -15,7 +15,7 @@ type VstackStyles = VstackProperties & DistributiveOmit<SystemStyleObject, keyof
 
 interface VstackPatternFn {
   (styles?: VstackStyles): string
-  raw: (styles: VstackStyles) => VstackStyles
+  raw: (styles: VstackStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/vstack.mjs

@@ -18,4 +18,4 @@ const vstackConfig = {
 export const getVstackStyle = (styles = {}) => vstackConfig.transform(styles, { map: mapObject })
 
 export const vstack = (styles) => css(getVstackStyle(styles))
-vstack.raw = (styles) => styles
+vstack.raw = getVstackStyle

package/styled-system/patterns/wrap.d.ts

@@ -18,7 +18,7 @@ type WrapStyles = WrapProperties & DistributiveOmit<SystemStyleObject, keyof Wra
 
 interface WrapPatternFn {
   (styles?: WrapStyles): string
-  raw: (styles: WrapStyles) => WrapStyles
+  raw: (styles: WrapStyles) => SystemStyleObject
 }
 
 

package/styled-system/patterns/wrap.mjs

@@ -20,4 +20,4 @@ const wrapConfig = {
 export const getWrapStyle = (styles = {}) => wrapConfig.transform(styles, { map: mapObject })
 
 export const wrap = (styles) => css(getWrapStyle(styles))
-wrap.raw = (styles) => styles
+wrap.raw = getWrapStyle

package/styled-system/types/recipe.d.ts

@@ -31,7 +31,7 @@ export type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T>
   __type: RecipeSelection<T>
   variantKeys: (keyof T)[]
   variantMap: RecipeVariantMap<T>
-  resolve: (props: RecipeSelection<T>) => SystemStyleObject
+  raw: (props?: RecipeSelection<T>) => SystemStyleObject
   config: RecipeConfig<T>
   splitVariantProps<Props extends RecipeSelection<T>>(
     props: Props,