feat: support newer css properties

.changeset/twelve-stingrays-brake.md

@@ -0,0 +1,5 @@
+---
+'@pandacss/generator': minor
+---
+
+Update csstype to support newer css features

packages/studio/styled-system/jsx/aspect-ratio.mjs

@@ -5,8 +5,5 @@ import { getAspectRatioStyle } from '../patterns/aspect-ratio.mjs';
 export const AspectRatio = /* @__PURE__ */ forwardRef(function AspectRatio(props, ref) {
   const { ratio, ...restProps } = props
 const styleProps = getAspectRatioStyle({ratio})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

packages/studio/styled-system/jsx/bleed.mjs

@@ -5,8 +5,5 @@ import { getBleedStyle } from '../patterns/bleed.mjs';
 export const Bleed = /* @__PURE__ */ forwardRef(function Bleed(props, ref) {
   const { inline, block, ...restProps } = props
 const styleProps = getBleedStyle({inline, block})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

packages/studio/styled-system/jsx/box.mjs

@@ -3,10 +3,6 @@ import { panda } from './factory.mjs';
 import { getBoxStyle } from '../patterns/box.mjs';
 
 export const Box = /* @__PURE__ */ forwardRef(function Box(props, ref) {
-  const restProps = props
-const styleProps = getBoxStyle()
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+  const styleProps = getBoxStyle()
+return createElement(panda.div, { ref, ...styleProps, ...props })
+})

packages/studio/styled-system/jsx/center.mjs

@@ -5,8 +5,5 @@ import { getCenterStyle } from '../patterns/center.mjs';
 export const Center = /* @__PURE__ */ forwardRef(function Center(props, ref) {
   const { inline, ...restProps } = props
 const styleProps = getCenterStyle({inline})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

packages/studio/styled-system/jsx/circle.mjs

@@ -5,8 +5,5 @@ import { getCircleStyle } from '../patterns/circle.mjs';
 export const Circle = /* @__PURE__ */ forwardRef(function Circle(props, ref) {
   const { size, ...restProps } = props
 const styleProps = getCircleStyle({size})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

packages/studio/styled-system/jsx/container.mjs

@@ -3,10 +3,6 @@ import { panda } from './factory.mjs';
 import { getContainerStyle } from '../patterns/container.mjs';
 
 export const Container = /* @__PURE__ */ forwardRef(function Container(props, ref) {
-  const restProps = props
-const styleProps = getContainerStyle()
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+  const styleProps = getContainerStyle()
+return createElement(panda.div, { ref, ...styleProps, ...props })
+})

packages/studio/styled-system/jsx/divider.mjs

@@ -5,8 +5,5 @@ import { getDividerStyle } from '../patterns/divider.mjs';
 export const Divider = /* @__PURE__ */ forwardRef(function Divider(props, ref) {
   const { orientation, thickness, color, ...restProps } = props
 const styleProps = getDividerStyle({orientation, thickness, color})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

packages/studio/styled-system/jsx/flex.mjs

@@ -5,8 +5,5 @@ import { getFlexStyle } from '../patterns/flex.mjs';
 export const Flex = /* @__PURE__ */ forwardRef(function Flex(props, ref) {
   const { align, justify, direction, wrap, basis, grow, shrink, ...restProps } = props
 const styleProps = getFlexStyle({align, justify, direction, wrap, basis, grow, shrink})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

packages/studio/styled-system/jsx/float.mjs

@@ -5,8 +5,5 @@ import { getFloatStyle } from '../patterns/float.mjs';
 export const Float = /* @__PURE__ */ forwardRef(function Float(props, ref) {
   const { offsetX, offsetY, offset, placement, ...restProps } = props
 const styleProps = getFloatStyle({offsetX, offsetY, offset, placement})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

packages/studio/styled-system/jsx/grid-item.mjs

@@ -5,8 +5,5 @@ import { getGridItemStyle } from '../patterns/grid-item.mjs';
 export const GridItem = /* @__PURE__ */ forwardRef(function GridItem(props, ref) {
   const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...restProps } = props
 const styleProps = getGridItemStyle({colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

packages/studio/styled-system/jsx/grid.mjs

@@ -5,8 +5,5 @@ import { getGridStyle } from '../patterns/grid.mjs';
 export const Grid = /* @__PURE__ */ forwardRef(function Grid(props, ref) {
   const { gap, columnGap, rowGap, columns, minChildWidth, ...restProps } = props
 const styleProps = getGridStyle({gap, columnGap, rowGap, columns, minChildWidth})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

packages/studio/styled-system/jsx/hstack.mjs

@@ -5,8 +5,5 @@ import { getHstackStyle } from '../patterns/hstack.mjs';
 export const HStack = /* @__PURE__ */ forwardRef(function HStack(props, ref) {
   const { justify, gap, ...restProps } = props
 const styleProps = getHstackStyle({justify, gap})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

packages/studio/styled-system/jsx/link-box.mjs

@@ -3,10 +3,6 @@ import { panda } from './factory.mjs';
 import { getLinkBoxStyle } from '../patterns/link-box.mjs';
 
 export const LinkBox = /* @__PURE__ */ forwardRef(function LinkBox(props, ref) {
-  const restProps = props
-const styleProps = getLinkBoxStyle()
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+  const styleProps = getLinkBoxStyle()
+return createElement(panda.div, { ref, ...styleProps, ...props })
+})

packages/studio/styled-system/jsx/link-overlay.mjs

@@ -3,10 +3,6 @@ import { panda } from './factory.mjs';
 import { getLinkOverlayStyle } from '../patterns/link-overlay.mjs';
 
 export const LinkOverlay = /* @__PURE__ */ forwardRef(function LinkOverlay(props, ref) {
-  const restProps = props
-const styleProps = getLinkOverlayStyle()
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.a, mergedProps)
-  })
+  const styleProps = getLinkOverlayStyle()
+return createElement(panda.a, { ref, ...styleProps, ...props })
+})

packages/studio/styled-system/jsx/spacer.mjs

@@ -5,8 +5,5 @@ import { getSpacerStyle } from '../patterns/spacer.mjs';
 export const Spacer = /* @__PURE__ */ forwardRef(function Spacer(props, ref) {
   const { size, ...restProps } = props
 const styleProps = getSpacerStyle({size})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

packages/studio/styled-system/jsx/square.mjs

@@ -5,8 +5,5 @@ import { getSquareStyle } from '../patterns/square.mjs';
 export const Square = /* @__PURE__ */ forwardRef(function Square(props, ref) {
   const { size, ...restProps } = props
 const styleProps = getSquareStyle({size})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

packages/studio/styled-system/jsx/stack.mjs

@@ -5,8 +5,5 @@ import { getStackStyle } from '../patterns/stack.mjs';
 export const Stack = /* @__PURE__ */ forwardRef(function Stack(props, ref) {
   const { align, justify, direction, gap, ...restProps } = props
 const styleProps = getStackStyle({align, justify, direction, gap})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

packages/studio/styled-system/jsx/styled-link.mjs

@@ -3,10 +3,6 @@ import { panda } from './factory.mjs';
 import { getStyledLinkStyle } from '../patterns/styled-link.mjs';
 
 export const StyledLink = /* @__PURE__ */ forwardRef(function StyledLink(props, ref) {
-  const restProps = props
-const styleProps = getStyledLinkStyle()
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+  const styleProps = getStyledLinkStyle()
+return createElement(panda.div, { ref, ...styleProps, ...props })
+})

packages/studio/styled-system/jsx/visually-hidden.mjs

@@ -3,10 +3,6 @@ import { panda } from './factory.mjs';
 import { getVisuallyHiddenStyle } from '../patterns/visually-hidden.mjs';
 
 export const VisuallyHidden = /* @__PURE__ */ forwardRef(function VisuallyHidden(props, ref) {
-  const restProps = props
-const styleProps = getVisuallyHiddenStyle()
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+  const styleProps = getVisuallyHiddenStyle()
+return createElement(panda.div, { ref, ...styleProps, ...props })
+})

packages/studio/styled-system/jsx/vstack.mjs

@@ -5,8 +5,5 @@ import { getVstackStyle } from '../patterns/vstack.mjs';
 export const VStack = /* @__PURE__ */ forwardRef(function VStack(props, ref) {
   const { justify, gap, ...restProps } = props
 const styleProps = getVstackStyle({justify, gap})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

packages/studio/styled-system/jsx/wrap.mjs

@@ -5,8 +5,5 @@ import { getWrapStyle } from '../patterns/wrap.mjs';
 export const Wrap = /* @__PURE__ */ forwardRef(function Wrap(props, ref) {
   const { gap, rowGap, columnGap, align, justify, ...restProps } = props
 const styleProps = getWrapStyle({gap, rowGap, columnGap, align, justify})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})