@pandacss/studio 0.6.0 → 0.8.0

package/dist/studio.js

@@ -33,10 +33,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// ../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.3/node_modules/tsup/assets/cjs_shims.js
+// ../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.25_typescript@5.1.6/node_modules/tsup/assets/cjs_shims.js
 var getImportMetaUrl, importMetaUrl;
 var init_cjs_shims = __esm({
-  "../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.3/node_modules/tsup/assets/cjs_shims.js"() {
+  "../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.25_typescript@5.1.6/node_modules/tsup/assets/cjs_shims.js"() {
     "use strict";
     getImportMetaUrl = () => typeof document === "undefined" ? new URL("file:" + __filename).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
     importMetaUrl = /* @__PURE__ */ getImportMetaUrl();

package/dist/studio.mjs

@@ -34,12 +34,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// ../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.3/node_modules/tsup/assets/esm_shims.js
+// ../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.25_typescript@5.1.6/node_modules/tsup/assets/esm_shims.js
 import { fileURLToPath } from "url";
 import path from "path";
 var getFilename, getDirname, __dirname;
 var init_esm_shims = __esm({
-  "../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.24_typescript@5.1.3/node_modules/tsup/assets/esm_shims.js"() {
+  "../../node_modules/.pnpm/tsup@7.1.0_postcss@8.4.25_typescript@5.1.6/node_modules/tsup/assets/esm_shims.js"() {
     "use strict";
     getFilename = () => fileURLToPath(import.meta.url);
     getDirname = () => path.dirname(getFilename());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -28,24 +28,24 @@
   "dependencies": {
     "@ark-ui/react": "0.7.2",
     "@astrojs/react": "2.2.1",
-    "astro": "2.7.2",
+    "astro": "2.8.4",
     "javascript-stringify": "2.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "vite": "4.3.9",
-    "@pandacss/types": "0.6.0",
-    "@pandacss/config": "0.6.0",
-    "@pandacss/shared": "0.6.0",
-    "@pandacss/token-dictionary": "0.6.0",
-    "@pandacss/logger": "0.6.0",
-    "@pandacss/node": "0.6.0"
+    "vite": "4.4.2",
+    "@pandacss/types": "0.8.0",
+    "@pandacss/config": "0.8.0",
+    "@pandacss/shared": "0.8.0",
+    "@pandacss/token-dictionary": "0.8.0",
+    "@pandacss/logger": "0.8.0",
+    "@pandacss/node": "0.8.0"
   },
   "devDependencies": {
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
-    "@vitejs/plugin-react": "4.0.1",
+    "@vitejs/plugin-react": "4.0.3",
     "execa": "7.1.1",
-    "@pandacss/dev": "0.6.0"
+    "@pandacss/dev": "0.8.0"
   },
   "scripts": {
     "codegen": "panda",

package/styled-system/chunks/..__shared____tests____string-literal.test.css

@@ -0,0 +1,15 @@
+@layer utilities {
+  .font_12px\/1\.5_Helvetica\,_Arial\,_sans-serif {
+    font: 12px/1.5 Helvetica, Arial, sans-serif;
+  }
+
+  .text_red {
+    color: red;
+  }
+
+  .\[\&\:hover\]\:text_blue {
+    &:hover {
+      color: blue;
+    }
+  }
+}

package/styled-system/css/conditions.mjs

@@ -78,7 +78,7 @@ const conditions = new Set([
   '_light',
   '_osDark',
   '_osLight',
-  '_highConstrast',
+  '_highContrast',
   '_lessContrast',
   '_moreContrast',
   '_ltr',

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

@@ -1,3 +1,9 @@
 /* eslint-disable */
 import type { SystemStyleObject } from '../types'
-export declare function css(styles: SystemStyleObject): string
+
+interface CssFunction {
+  (styles: SystemStyleObject): string
+  raw: (styles: SystemStyleObject) => SystemStyleObject
+}
+
+export declare const css: CssFunction;

package/styled-system/css/css.mjs

@@ -210,7 +210,8 @@ const classNameMap = {
   transitionTimingFunction: 'ease',
   transitionDelay: 'delay',
   transitionDuration: 'duration',
-  transitionProperty: 'transition',
+  transitionProperty: 'transition-prop',
+  transition: 'transition',
   animation: 'animation',
   animationDelay: 'animation-delay',
   transformOrigin: 'origin',
@@ -392,5 +393,6 @@ const context = {
 }
 
 export const css = createCss(context)
+css.raw = (styles) => styles
 
 export const { mergeCss, assignCss } = createMergeCss(context)

package/styled-system/jsx/is-valid-prop.mjs

@@ -294,6 +294,7 @@ var userGenerated = [
   'transitionDelay',
   'transitionDuration',
   'transitionProperty',
+  'transition',
   'animation',
   'animationDelay',
   'transformOrigin',
@@ -435,7 +436,7 @@ var userGenerated = [
   '_light',
   '_osDark',
   '_osLight',
-  '_highConstrast',
+  '_highContrast',
   '_lessContrast',
   '_moreContrast',
   '_ltr',

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

@@ -11,5 +11,10 @@ export type AspectRatioProperties = {
 
 type AspectRatioOptions = AspectRatioProperties & Omit<SystemStyleObject, keyof AspectRatioProperties | 'aspectRatio'>
 
+interface AspectRatioPatternFn {
+  (options?: AspectRatioOptions): string
+  raw: (options: AspectRatioOptions) => AspectRatioOptions
+}
+
 
-export declare function aspectRatio(options?: AspectRatioOptions): string
+export declare const aspectRatio: AspectRatioPatternFn;

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

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

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

@@ -11,5 +11,10 @@ export type BoxProperties = {
 
 type BoxOptions = BoxProperties & Omit<SystemStyleObject, keyof BoxProperties >
 
+interface BoxPatternFn {
+  (options?: BoxOptions): string
+  raw: (options: BoxOptions) => BoxOptions
+}
+
 
-export declare function box(options?: BoxOptions): string
+export declare const box: BoxPatternFn;

package/styled-system/patterns/box.mjs

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

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

@@ -11,5 +11,10 @@ export type CenterProperties = {
 
 type CenterOptions = CenterProperties & Omit<SystemStyleObject, keyof CenterProperties >
 
+interface CenterPatternFn {
+  (options?: CenterOptions): string
+  raw: (options: CenterOptions) => CenterOptions
+}
+
 
-export declare function center(options?: CenterOptions): string
+export declare const center: CenterPatternFn;

package/styled-system/patterns/center.mjs

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

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

@@ -11,5 +11,10 @@ export type CircleProperties = {
 
 type CircleOptions = CircleProperties & Omit<SystemStyleObject, keyof CircleProperties >
 
+interface CirclePatternFn {
+  (options?: CircleOptions): string
+  raw: (options: CircleOptions) => CircleOptions
+}
+
 
-export declare function circle(options?: CircleOptions): string
+export declare const circle: CirclePatternFn;

package/styled-system/patterns/circle.mjs

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

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

@@ -11,5 +11,10 @@ export type ContainerProperties = {
 
 type ContainerOptions = ContainerProperties & Omit<SystemStyleObject, keyof ContainerProperties >
 
+interface ContainerPatternFn {
+  (options?: ContainerOptions): string
+  raw: (options: ContainerOptions) => ContainerOptions
+}
+
 
-export declare function container(options?: ContainerOptions): string
+export declare const container: ContainerPatternFn;

package/styled-system/patterns/container.mjs

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

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

@@ -13,5 +13,10 @@ export type DividerProperties = {
 
 type DividerOptions = DividerProperties & Omit<SystemStyleObject, keyof DividerProperties >
 
+interface DividerPatternFn {
+  (options?: DividerOptions): string
+  raw: (options: DividerOptions) => DividerOptions
+}
+
 
-export declare function divider(options?: DividerOptions): string
+export declare const divider: DividerPatternFn;

package/styled-system/patterns/divider.mjs

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

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

@@ -17,5 +17,10 @@ export type FlexProperties = {
 
 type FlexOptions = FlexProperties & Omit<SystemStyleObject, keyof FlexProperties >
 
+interface FlexPatternFn {
+  (options?: FlexOptions): string
+  raw: (options: FlexOptions) => FlexOptions
+}
+
 
-export declare function flex(options?: FlexOptions): string
+export declare const flex: FlexPatternFn;

package/styled-system/patterns/flex.mjs

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

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

@@ -14,5 +14,10 @@ export type FloatProperties = {
 
 type FloatOptions = FloatProperties & Omit<SystemStyleObject, keyof FloatProperties >
 
+interface FloatPatternFn {
+  (options?: FloatOptions): string
+  raw: (options: FloatOptions) => FloatOptions
+}
+
 
-export declare function float(options?: FloatOptions): string
+export declare const float: FloatPatternFn;

package/styled-system/patterns/float.mjs

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

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

@@ -16,5 +16,10 @@ export type GridItemProperties = {
 
 type GridItemOptions = GridItemProperties & Omit<SystemStyleObject, keyof GridItemProperties >
 
+interface GridItemPatternFn {
+  (options?: GridItemOptions): string
+  raw: (options: GridItemOptions) => GridItemOptions
+}
+
 
-export declare function gridItem(options?: GridItemOptions): string
+export declare const gridItem: GridItemPatternFn;

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

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

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

@@ -15,5 +15,10 @@ export type GridProperties = {
 
 type GridOptions = GridProperties & Omit<SystemStyleObject, keyof GridProperties >
 
+interface GridPatternFn {
+  (options?: GridOptions): string
+  raw: (options: GridOptions) => GridOptions
+}
+
 
-export declare function grid(options?: GridOptions): string
+export declare const grid: GridPatternFn;

package/styled-system/patterns/grid.mjs

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

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

@@ -12,5 +12,10 @@ export type HstackProperties = {
 
 type HstackOptions = HstackProperties & Omit<SystemStyleObject, keyof HstackProperties >
 
+interface HstackPatternFn {
+  (options?: HstackOptions): string
+  raw: (options: HstackOptions) => HstackOptions
+}
+
 
-export declare function hstack(options?: HstackOptions): string
+export declare const hstack: HstackPatternFn;

package/styled-system/patterns/hstack.mjs

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

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

@@ -11,5 +11,10 @@ export type LinkBoxProperties = {
 
 type LinkBoxOptions = LinkBoxProperties & Omit<SystemStyleObject, keyof LinkBoxProperties >
 
+interface LinkBoxPatternFn {
+  (options?: LinkBoxOptions): string
+  raw: (options: LinkBoxOptions) => LinkBoxOptions
+}
+
 
-export declare function linkBox(options?: LinkBoxOptions): string
+export declare const linkBox: LinkBoxPatternFn;

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

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

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

@@ -11,5 +11,10 @@ export type LinkOverlayProperties = {
 
 type LinkOverlayOptions = LinkOverlayProperties & Omit<SystemStyleObject, keyof LinkOverlayProperties >
 
+interface LinkOverlayPatternFn {
+  (options?: LinkOverlayOptions): string
+  raw: (options: LinkOverlayOptions) => LinkOverlayOptions
+}
+
 
-export declare function linkOverlay(options?: LinkOverlayOptions): string
+export declare const linkOverlay: LinkOverlayPatternFn;

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

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

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

@@ -11,5 +11,10 @@ export type SpacerProperties = {
 
 type SpacerOptions = SpacerProperties & Omit<SystemStyleObject, keyof SpacerProperties >
 
+interface SpacerPatternFn {
+  (options?: SpacerOptions): string
+  raw: (options: SpacerOptions) => SpacerOptions
+}
+
 
-export declare function spacer(options?: SpacerOptions): string
+export declare const spacer: SpacerPatternFn;

package/styled-system/patterns/spacer.mjs

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

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

@@ -11,5 +11,10 @@ export type SquareProperties = {
 
 type SquareOptions = SquareProperties & Omit<SystemStyleObject, keyof SquareProperties >
 
+interface SquarePatternFn {
+  (options?: SquareOptions): string
+  raw: (options: SquareOptions) => SquareOptions
+}
+
 
-export declare function square(options?: SquareOptions): string
+export declare const square: SquarePatternFn;

package/styled-system/patterns/square.mjs

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

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

@@ -14,5 +14,10 @@ export type StackProperties = {
 
 type StackOptions = StackProperties & Omit<SystemStyleObject, keyof StackProperties >
 
+interface StackPatternFn {
+  (options?: StackOptions): string
+  raw: (options: StackOptions) => StackOptions
+}
+
 
-export declare function stack(options?: StackOptions): string
+export declare const stack: StackPatternFn;

package/styled-system/patterns/stack.mjs

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

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

@@ -11,5 +11,10 @@ export type StyledLinkProperties = {
 
 type StyledLinkOptions = StyledLinkProperties & Omit<SystemStyleObject, keyof StyledLinkProperties >
 
+interface StyledLinkPatternFn {
+  (options?: StyledLinkOptions): string
+  raw: (options: StyledLinkOptions) => StyledLinkOptions
+}
+
 
-export declare function styledLink(options?: StyledLinkOptions): string
+export declare const styledLink: StyledLinkPatternFn;

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

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

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

@@ -12,5 +12,10 @@ export type VstackProperties = {
 
 type VstackOptions = VstackProperties & Omit<SystemStyleObject, keyof VstackProperties >
 
+interface VstackPatternFn {
+  (options?: VstackOptions): string
+  raw: (options: VstackOptions) => VstackOptions
+}
+
 
-export declare function vstack(options?: VstackOptions): string
+export declare const vstack: VstackPatternFn;

package/styled-system/patterns/vstack.mjs

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

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

@@ -15,5 +15,10 @@ export type WrapProperties = {
 
 type WrapOptions = WrapProperties & Omit<SystemStyleObject, keyof WrapProperties >
 
+interface WrapPatternFn {
+  (options?: WrapOptions): string
+  raw: (options: WrapOptions) => WrapOptions
+}
+
 
-export declare function wrap(options?: WrapOptions): string
+export declare const wrap: WrapPatternFn;

package/styled-system/patterns/wrap.mjs

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

package/styled-system/styles.css

@@ -11,6 +11,14 @@
 @import './tokens/keyframes.css';
 
 @layer utilities {
+  .font_12px\/1\.5_Helvetica\,_Arial\,_sans-serif {
+    font: 12px/1.5 Helvetica, Arial, sans-serif;
+  }
+
+  .text_red {
+    color: red;
+  }
+
   .w_26px {
     width: 26px;
   }
@@ -996,6 +1004,10 @@
     border-bottom-color: var(--colors-black);
   }
 
+  .\[\&\:hover\]\:text_blue:hover {
+    color: blue;
+  }
+
   .\[\&\:hover\]\:bg_\#4049f0:hover {
     background: #4049f0;
   }

package/styled-system/tokens/index.css

@@ -425,17 +425,6 @@
     --colors-bg: #fff;
     --colors-card: #e5e5e5;
     --colors-border: #d4d4d4;
-    --colors-color-palette-50: var(--colors-color-palette-50);
-    --colors-color-palette-100: var(--colors-color-palette-100);
-    --colors-color-palette-200: var(--colors-color-palette-200);
-    --colors-color-palette-300: var(--colors-color-palette-300);
-    --colors-color-palette-400: var(--colors-color-palette-400);
-    --colors-color-palette-500: var(--colors-color-palette-500);
-    --colors-color-palette-600: var(--colors-color-palette-600);
-    --colors-color-palette-700: var(--colors-color-palette-700);
-    --colors-color-palette-800: var(--colors-color-palette-800);
-    --colors-color-palette-900: var(--colors-color-palette-900);
-    --colors-color-palette-950: var(--colors-color-palette-950);
   }
 
   .dark {

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

@@ -79,7 +79,7 @@ export type Conditions = {
 	"_light": string
 	"_osDark": string
 	"_osLight": string
-	"_highConstrast": string
+	"_highContrast": string
 	"_lessContrast": string
 	"_moreContrast": string
 	"_ltr": string

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

@@ -1,10 +1,14 @@
 /* eslint-disable */
-import type { ComponentProps, ElementType } from 'react'
+import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
 type Dict = Record<string, unknown>
 
+type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
+  ref?: Ref<ElementRef<T>>
+}
+
 export type PandaComponent<T extends ElementType, P extends Dict = {}> = {
   (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
   displayName?: string

package/styled-system/types/prop-type.d.ts

@@ -5,6 +5,7 @@ import type { Tokens } from '../tokens'
 
 type PropertyValueTypes  = {
 	aspectRatio: "auto" | "square" | "landscape" | "portrait" | "wide" | "ultrawide" | "golden";
+	zIndex: Tokens["zIndex"];
 	top: Tokens["spacing"];
 	left: Tokens["spacing"];
 	insetInline: Tokens["spacing"];
@@ -150,7 +151,7 @@ type PropertyValueTypes  = {
 	transitionTimingFunction: Tokens["easings"];
 	transitionDelay: Tokens["durations"];
 	transitionDuration: Tokens["durations"];
-	transitionProperty: "all" | "none" | "opacity" | "shadow" | "transform" | "base" | "background" | "colors";
+	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform";
 	animation: Tokens["animations"];
 	animationDelay: Tokens["durations"];
 	scale: "auto" | CssProperties["scale"];

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

@@ -27,9 +27,7 @@ export type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T>
   variantMap: RecipeVariantMap<T>
   resolve: (props: RecipeSelection<T>) => SystemStyleObject
   config: RecipeConfig<T>
-  splitVariantProps<Props extends RecipeSelection<T>>(
-    props: Props,
-  ): [RecipeSelection<T>, Pretty<Omit<Props, keyof RecipeVariantRecord>>]
+  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]
 }
 
 export type RecipeCompoundSelection<T extends RecipeVariantRecord> = {