fix: container styles declare as primitive

app/page.tsx

@@ -1,8 +1,7 @@
 import ControlledTable from "@/components/controlled-table";
 import CtaBanner from "@/components/cta-banner";
-import { title } from "@/components/primitives";
+import { container, title } from "@/components/primitives";
 import { queryDatabase } from "@/lib/notion";
-import { containerStyle } from "@/styles";
 import { PaginatedCustomDataResponse } from "@/types";
 import { Contribution } from "@/types/contribution";
 import { SearchParams } from "@/types/filters";
@@ -31,12 +30,12 @@ export default async function Home({ searchParams }: IHomeProps) {
   return (
     <>
       <section
-        className={`flex flex-col items-center text-center pt-10 pb-24 ${containerStyle}`}
+        className={`flex flex-col items-center text-center pt-10 pb-24 ${container()}`}
       >
         <h1 className={title()}>Find Collaborations,</h1>
         <h1 className={title()}>Collect Kudos</h1>
       </section>
-      <section className={containerStyle}>
+      <section className={container()}>
         <CtaBanner />
       </section>
       <div className="pt-10">

components/controlled-table.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import ContributionsTable from "@/components/contributions-table/table";
 import Toolbar from "@/components/filters/toolbar";
+import { container } from "@/components/primitives";
 import { FiltersProvider } from "@/contexts/filters";
-import { containerStyle } from "@/styles";
 import { PaginatedCustomDataResponse } from "@/types";
 import { Contribution } from "@/types/contribution";
 import { SearchParams } from "@/types/filters";
@@ -21,7 +21,7 @@ const ControlledTable = ({
     <FiltersProvider initialParams={searchParams}>
       <div className="flex flex-col">
         <Toolbar searchParams={searchParams} />
-        <section className={containerStyle}>
+        <section className={container()}>
           <ContributionsTable
             items={items}
             queries={{

components/filters/toolbar.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { useRef } from "react";
+import { container } from "@/components/primitives";
 import { useFilters } from "@/contexts/filters";
 import {
   LANGUAGES_OPTIONS,
@@ -11,7 +12,6 @@ import {
   PROJECTS_KEY,
 } from "@/data/filters";
 import useSticky from "@/hooks/useSticky";
-import { containerStyle } from "@/styles";
 import { SearchParams } from "@/types/filters";
 import CheckboxFilter from "./checkbox-filter";
 import ClearFilters from "./clear-filters";
@@ -42,7 +42,7 @@ const Toolbar = ({ searchParams }: IToolbarProps) => {
       }`}
       ref={toolbarRef}
     >
-      <div className={`pt-6 flex flex-col gap-4 ${containerStyle}`}>
+      <div className={`pt-6 flex flex-col gap-4 ${container()}`}>
         <div className="flex flex-col gap-4 items-start overflow-hidden lg:flex-row lg:items-center">
           <div className="flex flex-nowrap overflow-x-auto overflow-y-hidden gap-4 w-full sm:w-auto xl:overflow-visible">
             <SelectFilter

components/primitives.ts

@@ -51,3 +51,7 @@ export const subtitle = tv({
     fullWidth: true,
   },
 });
+
+export const container = tv({
+  base: "px-6 container mx-auto max-w-7xl",
+});