Container

import { VStack } from '@otfdashkit/ui/layouts-stack'
import { Container } from '@otfdashkit/ui/layouts-container'

export function Example() {
  return (
    <VStack gap={4} className="p-4">
      {(['sm', 'md', 'lg', 'xl', 'full'] as const).map(size => (
        <Container key={size} size={size} className="border border-[hsl(var(--border))] rounded-md py-3 bg-[hsl(var(--accent))]">
          <span className="text-sm text-[hsl(var(--foreground))] font-medium">size="{size}"</span>
          <span className="text-xs text-[hsl(var(--muted-foreground))] ml-2">max-w-screen-{size !== 'full' ? size : 'none'}</span>
        </Container>
      ))}
    </VStack>
  )
}