Expression produces a union type that is too complex to represent error when using css prop in JSX components

[kris-ellery]

Description

After upgrading to Panda 0.36.0 I noticed a new TS error Expression produces a union type that is too complex to represent. when using css prop on JSX component.

Here is the simplest reproduction:

const MyComponent = (props: MyComponentProps) => {
  const { css: cssProp, ...rest } = props;
  return (
    <div
      className={css(cssProp)} // TS error
      {...rest}
    />
  );
};

More advanced reproduction: https://play.panda-css.com/u231oHYIOv (see line 39)

Link to Reproduction

https://play.panda-css.com/u231oHYIOv

Steps to reproduce

1. Go to Panda Playground Reproduction
2. Scroll to line 39
3. See error

JS Framework

React (TS)

Panda CSS Version

0.36.0

Browser

Google Chrome 123

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[astahmer]

this happens because you're importing the (generic one) SystemStyleObject from @pandacss/dev instead of the (custom specific to your config) one from your local styled-system

https://play.panda-css.com/u231oHYIOv/CltXjOMa_n