CVA prop named color make wrong CSS

[thewebartisan7]

I am not sure if this is a bug or if I am doing something wrong, so I am opening here a discussion.

Considering below example I see that generated CSS has wrong:

  .c_primary {
    color: primary;
}

Code:

import { cva } from 'styled-system/css';
import { center } from 'styled-system/patterns';
import { styled } from 'styled-system/jsx'

export const App = () => {
  return (
    <div className={center({ h: 'full' })}>
      <Button color="primary">ehila</Button>
    </div>
  );
};

const buttonStyle = cva({
  base: {
    color: 'red',
    textAlign: 'center'
  },
  variants: {
    color: {
            primary: {
                backgroundColor: 'red',
                color: 'pink'
            }
        },
  }
})
 
const Button = styled('button', buttonStyle)

Link: https://play.panda-css.com/tNWE-uPUhU

Same happen also locally with vite running panda debug