1  import { Slot } from "@radix-ui/react-slot";
 2  import { cva, VariantProps } from "class-variance-authority";
 3  import { cn } from "../../lib/utils";
 4  import * as React from "react";
 5  
 6  const containerVariants = cva("max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", {
 7    variants: {
 8      padding: {
 9        none: "p-0",
10        small: "p-2",
11        medium: "p-4",
12        large: "p-8",
13      },
14      margin: {
15        none: "m-0",
16        small: "m-2",
17        medium: "m-4",
18        large: "m-8",
19      },
20    },
21    defaultVariants: {
22      padding: "medium",
23      margin: "none",
24    },
25  });
26  
27  export interface ContainerProps
28    extends React.HTMLAttributes<HTMLDivElement>,
29      VariantProps<typeof containerVariants> {
30    asChild?: boolean;
31  }
32  
33  const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
34    ({ asChild, children, className, padding, margin, ...props }, ref) => {
35      const Comp = asChild ? Slot : "div";
36  
37      return (
38        <Comp
39          ref={ref}
40          className={cn(containerVariants({ padding, margin }), className)}
41          {...props}
42        >
43          {children}
44        </Comp>
45      );
46    },
47  );
48  
49  Container.displayName = "Container";
50  
51  export { Container };