@pandacss/studio 0.0.0-dev-20230620131522 → 0.0.0-dev-20230620140303

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.0.0-dev-20230620131522",
+  "version": "0.0.0-dev-20230620140303",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -32,19 +32,19 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "4.3.9",
-    "@pandacss/types": "0.0.0-dev-20230620131522",
-    "@pandacss/config": "0.0.0-dev-20230620131522",
-    "@pandacss/shared": "0.0.0-dev-20230620131522",
-    "@pandacss/token-dictionary": "0.0.0-dev-20230620131522",
-    "@pandacss/logger": "0.0.0-dev-20230620131522",
-    "@pandacss/node": "0.0.0-dev-20230620131522"
+    "@pandacss/types": "0.0.0-dev-20230620140303",
+    "@pandacss/config": "0.0.0-dev-20230620140303",
+    "@pandacss/shared": "0.0.0-dev-20230620140303",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230620140303",
+    "@pandacss/logger": "0.0.0-dev-20230620140303",
+    "@pandacss/node": "0.0.0-dev-20230620140303"
   },
   "devDependencies": {
     "@types/react": "18.2.12",
     "@types/react-dom": "18.2.5",
     "@vitejs/plugin-react": "4.0.0",
     "execa": "7.1.1",
-    "@pandacss/dev": "0.0.0-dev-20230620131522"
+    "@pandacss/dev": "0.0.0-dev-20230620140303"
   },
   "scripts": {
     "codegen": "panda",

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

@@ -682,7 +682,6 @@ var allCssProperties = [
   'clip',
   'clipPath',
   'color',
-  'printColorAdjust',
   'colorScheme',
   'columnCount',
   'columnFill',
@@ -700,6 +699,9 @@ var allCssProperties = [
   'containIntrinsicHeight',
   'containIntrinsicInlineSize',
   'containIntrinsicWidth',
+  'container',
+  'containerName',
+  'containerType',
   'content',
   'contentVisibility',
   'counterIncrement',
@@ -724,6 +726,7 @@ var allCssProperties = [
   'fontKerning',
   'fontLanguageOverride',
   'fontOpticalSizing',
+  'fontPalette',
   'fontVariationSettings',
   'fontSize',
   'fontSizeAdjust',
@@ -735,6 +738,7 @@ var allCssProperties = [
   'fontVariantAlternates',
   'fontVariantCaps',
   'fontVariantEastAsian',
+  'fontVariantEmoji',
   'fontVariantLigatures',
   'fontVariantNumeric',
   'fontVariantPosition',
@@ -878,6 +882,7 @@ var allCssProperties = [
   'paddingLeft',
   'paddingRight',
   'paddingTop',
+  'page',
   'pageBreakAfter',
   'pageBreakBefore',
   'pageBreakInside',
@@ -889,6 +894,7 @@ var allCssProperties = [
   'placeSelf',
   'pointerEvents',
   'position',
+  'printColorAdjust',
   'quotes',
   'resize',
   'right',
@@ -980,6 +986,7 @@ var allCssProperties = [
   'unicodeBidi',
   'userSelect',
   'verticalAlign',
+  'viewTransitionName',
   'visibility',
   'whiteSpace',
   'widows',
@@ -1001,7 +1008,8 @@ function memo(fn) {
     return cache[arg]
   }
 }
+var selectorRegex = /&|@/
 var isCssProperty = memo((prop) => {
-  return properties.has(prop) || prop.startsWith('--')
+  return properties.has(prop) || prop.startsWith('--') || selectorRegex.test(prop)
 })
 export { allCssProperties, isCssProperty }

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

@@ -2,17 +2,27 @@ import { mapObject } from '../helpers.mjs'
 import { css } from '../css/index.mjs'
 
 const aspectRatioConfig = {
-  transform(props) {
-    const { ratio, ...rest } = props
+  transform(props, { map }) {
+    const { ratio = 4 / 3, ...rest } = props
     return {
-      aspectRatio: ratio,
-      overflow: 'hidden',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      '&>img, &>video': {
+      position: 'relative',
+      _before: {
+        content: `""`,
+        display: 'block',
+        height: '0',
+        paddingBottom: map(ratio, (r) => `${(1 / r) * 100}%`),
+      },
+      '&>*': {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+        position: 'absolute',
+        inset: '0',
         width: '100%',
         height: '100%',
+      },
+      '&>img, &>video': {
         objectFit: 'cover',
       },
       ...rest,

package/styled-system/types/style-props.d.ts

@@ -227,7 +227,6 @@ export type SystemProperties = {
 	clip?: PropertyValue<'clip'>
 	clipPath?: PropertyValue<'clipPath'>
 	color?: PropertyValue<'color'>
-	printColorAdjust?: PropertyValue<'printColorAdjust'>
 	colorScheme?: PropertyValue<'colorScheme'>
 	columnCount?: PropertyValue<'columnCount'>
 	columnFill?: PropertyValue<'columnFill'>
@@ -245,6 +244,9 @@ export type SystemProperties = {
 	containIntrinsicHeight?: PropertyValue<'containIntrinsicHeight'>
 	containIntrinsicInlineSize?: PropertyValue<'containIntrinsicInlineSize'>
 	containIntrinsicWidth?: PropertyValue<'containIntrinsicWidth'>
+	container?: PropertyValue<'container'>
+	containerName?: PropertyValue<'containerName'>
+	containerType?: PropertyValue<'containerType'>
 	content?: PropertyValue<'content'>
 	contentVisibility?: PropertyValue<'contentVisibility'>
 	counterIncrement?: PropertyValue<'counterIncrement'>
@@ -269,6 +271,7 @@ export type SystemProperties = {
 	fontKerning?: PropertyValue<'fontKerning'>
 	fontLanguageOverride?: PropertyValue<'fontLanguageOverride'>
 	fontOpticalSizing?: PropertyValue<'fontOpticalSizing'>
+	fontPalette?: PropertyValue<'fontPalette'>
 	fontVariationSettings?: PropertyValue<'fontVariationSettings'>
 	fontSize?: PropertyValue<'fontSize'>
 	fontSizeAdjust?: PropertyValue<'fontSizeAdjust'>
@@ -280,6 +283,7 @@ export type SystemProperties = {
 	fontVariantAlternates?: PropertyValue<'fontVariantAlternates'>
 	fontVariantCaps?: PropertyValue<'fontVariantCaps'>
 	fontVariantEastAsian?: PropertyValue<'fontVariantEastAsian'>
+	fontVariantEmoji?: PropertyValue<'fontVariantEmoji'>
 	fontVariantLigatures?: PropertyValue<'fontVariantLigatures'>
 	fontVariantNumeric?: PropertyValue<'fontVariantNumeric'>
 	fontVariantPosition?: PropertyValue<'fontVariantPosition'>
@@ -423,6 +427,7 @@ export type SystemProperties = {
 	paddingLeft?: PropertyValue<'paddingLeft'>
 	paddingRight?: PropertyValue<'paddingRight'>
 	paddingTop?: PropertyValue<'paddingTop'>
+	page?: PropertyValue<'page'>
 	pageBreakAfter?: PropertyValue<'pageBreakAfter'>
 	pageBreakBefore?: PropertyValue<'pageBreakBefore'>
 	pageBreakInside?: PropertyValue<'pageBreakInside'>
@@ -434,6 +439,7 @@ export type SystemProperties = {
 	placeSelf?: PropertyValue<'placeSelf'>
 	pointerEvents?: PropertyValue<'pointerEvents'>
 	position?: PropertyValue<'position'>
+	printColorAdjust?: PropertyValue<'printColorAdjust'>
 	quotes?: PropertyValue<'quotes'>
 	resize?: PropertyValue<'resize'>
 	right?: PropertyValue<'right'>
@@ -525,6 +531,7 @@ export type SystemProperties = {
 	unicodeBidi?: PropertyValue<'unicodeBidi'>
 	userSelect?: PropertyValue<'userSelect'>
 	verticalAlign?: PropertyValue<'verticalAlign'>
+	viewTransitionName?: PropertyValue<'viewTransitionName'>
 	visibility?: PropertyValue<'visibility'>
 	whiteSpace?: PropertyValue<'whiteSpace'>
 	widows?: PropertyValue<'widows'>