feat: container query (cq) pattern

[astahmer]

📝 Description

Add new cq pattern in @pandacss/preset-base (included by default)

// 1 - Define container conditions

export default defineConfig({
  // ...
  theme: {
    containerNames: ['sidebar', 'content'],
    containerSizes: {
      xs: '40em',
      sm: '60em',
      md: '80em',
    },
  },
})

// 2 - Automatically generate container query pattern

import { cq } from 'styled-system/patterns'

function Demo() {
  return (
    <nav className={cq({ name: 'sidebar' })}>
      <div
        className={css({
          // When the sidebar container reaches the `sm` size
          // change font size to `md`
          fontSize: { base: 'lg', '@sidebar/sm': 'md' },
        })}
      />
    </nav>
  )
}

💣 Is this a breaking change (Yes/No):

no

[changeset-bot]

🦋 Changeset detected

Latest commit: 0832bef

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 20 packages

Name	Type
@pandacss/preset-base	Minor
@pandacss/types	Minor
@pandacss/core	Minor
@pandacss/config	Minor
@pandacss/fixture	Minor
@pandacss/dev	Minor
@pandacss/generator	Minor
@pandacss/node	Minor
@pandacss/parser	Minor
@pandacss/preset-atlaskit	Minor
@pandacss/preset-open-props	Minor
@pandacss/preset-panda	Minor
@pandacss/studio	Minor
@pandacss/token-dictionary	Minor
@pandacss/astro-plugin-studio	Minor
@pandacss/postcss	Minor
@pandacss/extractor	Minor
@pandacss/is-valid-prop	Minor
@pandacss/logger	Minor
@pandacss/shared	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
panda-docs	✅ Ready (Inspect)	Visit Preview	Jan 28, 2024 8:57pm
panda-playground	✅ Ready (Inspect)	Visit Preview	Jan 28, 2024 8:57pm
panda-studio	✅ Ready (Inspect)	Visit Preview	Jan 28, 2024 8:57pm