Playground doesn't match the docs import pathname

[joevingracien]

Description

import { css } from 'design-system/css';
import { grid } from 'design-system/patterns';

const Button = ({children}) => {
  return (
    <button
      className={css({
        color: 'red.400',
        padding: '10px',
        border: 'solid',
        _hover: {
          borderRadius: '50px',
          bg: 'orange.400',
          border: 'none',
          color: 'white',
          _focus: {
            color: 'black',
            letterSpacing: '10px',
          },
        },
        transition: '1s',
      })}
    >
      {children}
    </button>
  );
};

export const App = () => {
  return (
<div className={grid({ columns: 2, gap: '6' })}>
      <Button>yoyo</Button>
      <Button>YOOOOOOOw</Button>
      <Button>Hasaaa</Button>
</div>
  );
};

While I like the wording 'design-system' much better and as far as I understand this should be import { grid } from 'styled-system/patterns';

Link to Reproduction

https://panda-playground.vercel.app/bPovrTv3Lc

Steps to reproduce

import { grid } from 'styled-system/patterns' brings an error

JS Framework

React

Panda CSS Version

Playground

Browser

Arc

Operating System

• macOS
• Windows
• Linux

Additional Information

Thanks a lot for creating Panda CSS

[anubra266]

@joevingracien it's configurable, you can set it in the config with outDir key.

[joevingracien]

Sure, and that's awesome. I just thought it would make much more sense to have consistency between playground and docs.