diff --git a/.storybook/DocumentationTemplate.mdx b/.storybook/DocumentationTemplate.mdx
index 58eb70970..0537ea69d 100644
--- a/.storybook/DocumentationTemplate.mdx
+++ b/.storybook/DocumentationTemplate.mdx
@@ -3,21 +3,7 @@ import { Controls, Meta, Primary, Stories, Title } from "@storybook/blocks"
 <Meta isTemplate />
 
 <Title />
-
-# Default implementation
-
 <Primary />
-
-## Inputs
-
-The component accepts the following inputs (props):
-
 <Controls />
 
----
-
-## Additional variations
-
-Listed below are additional variations of the component.
-
 <Stories />
diff --git a/.storybook/main.ts b/.storybook/main.ts
index f5ebf49a0..2150278c7 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -25,5 +25,8 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
 }
 export default config
diff --git a/.storybook/manager.ts b/.storybook/manager.tsx
similarity index 62%
rename from .storybook/manager.ts
rename to .storybook/manager.tsx
index 8b042f84e..fd84cb7f5 100644
--- a/.storybook/manager.ts
+++ b/.storybook/manager.tsx
@@ -4,4 +4,7 @@ import factorialOne from "./FactorialOne"
 
 addons.setConfig({
   theme: factorialOne,
+  sidebar: {
+    collapsedRoots: ["foundations", "examples", "experiments"],
+  },
 })
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 7144ea15c..326093a63 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -40,6 +40,7 @@ const preview: Preview = {
     },
     docs: {
       page: DocumentationTemplate,
+      toc: true,
     },
     actions: { argTypesRegex: "^on.*" },
     controls: {
diff --git a/lib/foundations/alert.stories.tsx b/lib/foundations/alert.stories.tsx
index b52c7d872..9da89c67f 100644
--- a/lib/foundations/alert.stories.tsx
+++ b/lib/foundations/alert.stories.tsx
@@ -7,7 +7,7 @@ import { BookOpen, CircleCheck, OctagonX, TriangleAlert } from "lucide-react"
 const meta = {
   component: Alert,
   parameters: {
-    layout: "centered",
+    layout: "padded",
   },
   tags: ["autodocs"],
   args: {},
@@ -17,60 +17,73 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Destructive: Story = {
-  render: () => {
-    return (
-      <Alert variant="destructive" className="max-w-80">
-        <OctagonX size={20} />
-        <AlertTitle>Critical system error</AlertTitle>
-        <AlertDescription>
-          System issue detected. Act immediately to prevent data loss.
-        </AlertDescription>
-      </Alert>
-    )
+  args: {
+    variant: "destructive",
   },
+  render: (props) => (
+    <Alert {...props}>
+      <OctagonX size={20} />
+      <AlertTitle>Critical system error</AlertTitle>
+      <AlertDescription>
+        System issue detected. Act immediately to prevent data loss.
+      </AlertDescription>
+    </Alert>
+  ),
 }
 
 export const Positive: Story = {
-  render: () => {
-    return (
-      <Alert variant="positive" className="max-w-80">
-        <CircleCheck size={20} />
-        <AlertTitle>Training completed!</AlertTitle>
-        <AlertDescription>
-          You successfully completed the training ‘Eat. Sleep. Command Z.
-          Repeat’.
-        </AlertDescription>
-      </Alert>
-    )
+  args: {
+    variant: "positive",
   },
+  render: (props) => (
+    <Alert {...props}>
+      <CircleCheck size={20} />
+      <AlertTitle>Training completed!</AlertTitle>
+      <AlertDescription>
+        You successfully completed the training ‘Eat. Sleep. Command Z. Repeat’.
+      </AlertDescription>
+    </Alert>
+  ),
 }
 
 export const Warning: Story = {
-  render: () => {
-    return (
-      <Alert variant="warning" className="max-w-80">
-        <TriangleAlert size={20} />
-        <AlertTitle>Top up account</AlertTitle>
-        <AlertDescription>
-          Your account balance is below 1.000,00 €. Add money to your balance in
-          order to avoid failed card payments immediately.
-        </AlertDescription>
-      </Alert>
-    )
+  args: {
+    variant: "warning",
   },
+  render: (props) => (
+    <Alert {...props}>
+      <TriangleAlert size={20} />
+      <AlertTitle>Top up account</AlertTitle>
+      <AlertDescription>
+        Your account balance is below 1.000,00 €. Add money to your balance in
+        order to avoid failed card payments immediately.
+      </AlertDescription>
+    </Alert>
+  ),
 }
 
 export const Info: Story = {
-  render: () => {
-    return (
-      <Alert variant="info" className="max-w-80">
+  args: {
+    variant: "info",
+    children: (
+      <>
         <BookOpen size={20} />
         <AlertTitle>Invite your Bookkeeper</AlertTitle>
         <AlertDescription>
           You can now invite your Bookkeeper to centralize all types of
           communications about employee updates in one place.
         </AlertDescription>
-      </Alert>
-    )
+      </>
+    ),
   },
+  render: (props) => (
+    <Alert {...props}>
+      <BookOpen size={20} />
+      <AlertTitle>Invite your Bookkeeper</AlertTitle>
+      <AlertDescription>
+        You can now invite your Bookkeeper to centralize all types of
+        communications about employee updates in one place.
+      </AlertDescription>
+    </Alert>
+  ),
 }
diff --git a/lib/foundations/badge.stories.tsx b/lib/foundations/badge.stories.tsx
index 663826d43..fd4e41738 100644
--- a/lib/foundations/badge.stories.tsx
+++ b/lib/foundations/badge.stories.tsx
@@ -15,37 +15,42 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: () => {
-    return <Badge>Home</Badge>
+  render(props) {
+    return <Badge {...props}>Home</Badge>
   },
 }
 
 export const Neutral: Story = {
-  render: () => {
-    return <Badge variant="neutral">Rejected</Badge>
+  args: {
+    variant: "neutral",
+    children: "Neutral",
   },
 }
 
 export const Destructive: Story = {
-  render: () => {
-    return <Badge variant="destructive">Rejected</Badge>
+  args: {
+    variant: "destructive",
+    children: "Destructive",
   },
 }
 
 export const Positive: Story = {
-  render: () => {
-    return <Badge variant="positive">Completed</Badge>
+  args: {
+    variant: "positive",
+    children: "Positive",
   },
 }
 
 export const Warning: Story = {
-  render: () => {
-    return <Badge variant="warning">Review</Badge>
+  args: {
+    variant: "warning",
+    children: "Warning",
   },
 }
 
 export const Info: Story = {
-  render: () => {
-    return <Badge variant="info">In progress</Badge>
+  args: {
+    variant: "info",
+    children: "Info",
   },
 }
diff --git a/lib/foundations/button.stories.ts b/lib/foundations/button.stories.ts
index e1f482e5f..c9d560c8b 100644
--- a/lib/foundations/button.stories.ts
+++ b/lib/foundations/button.stories.ts
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { fn } from "@storybook/test"
 
-import { Button, sizes, variants } from "./button"
+import { Button } from "./button"
 
 const meta = {
   component: Button,
@@ -9,20 +9,6 @@ const meta = {
     layout: "centered",
   },
   tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: {
-        type: "select",
-      },
-      options: [...variants],
-    },
-    size: {
-      control: {
-        type: "select",
-      },
-      options: [...sizes],
-    },
-  },
   args: {
     variant: "default",
     size: "default",
diff --git a/lib/foundations/calendar.stories.tsx b/lib/foundations/calendar.stories.tsx
index b4a0525c1..86bb6a832 100644
--- a/lib/foundations/calendar.stories.tsx
+++ b/lib/foundations/calendar.stories.tsx
@@ -21,11 +21,15 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Single: Story = {
-  render: () => {
+  args: {
+    mode: "single",
+  },
+  render(props) {
     const [selectedDay, setSelectedDay] = useState<Date>()
 
     return (
       <Calendar
+        {...props}
         mode="single"
         selected={selectedDay}
         onSelect={setSelectedDay}
@@ -35,7 +39,11 @@ export const Single: Story = {
 }
 
 export const Multiple: Story = {
-  render: () => {
+  args: {
+    mode: "multiple",
+    min: 1,
+  },
+  render(props) {
     const initialDays: Date[] = []
     const [days, setDays] = useState<Date[] | undefined>(initialDays)
 
@@ -52,6 +60,7 @@ export const Multiple: Story = {
 
     return (
       <Calendar
+        {...props}
         mode="multiple"
         min={1}
         selected={days}
@@ -63,7 +72,7 @@ export const Multiple: Story = {
 }
 
 export const Range: Story = {
-  render: () => {
+  render(props) {
     const pastMonth = new Date(2024, 10, 15)
     const defaultSelected: DateRange = {
       from: pastMonth,
@@ -94,6 +103,7 @@ export const Range: Story = {
 
     return (
       <Calendar
+        {...props}
         id="test"
         mode="range"
         defaultMonth={pastMonth}
diff --git a/lib/foundations/card.stories.tsx b/lib/foundations/card.stories.tsx
index 5263fd9f3..3f16b9240 100644
--- a/lib/foundations/card.stories.tsx
+++ b/lib/foundations/card.stories.tsx
@@ -24,9 +24,9 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Basic: Story = {
-  render: () => {
+  render(props) {
     return (
-      <Card>
+      <Card {...props}>
         <CardContent>This is a basic card</CardContent>
       </Card>
     )
@@ -34,9 +34,9 @@ export const Basic: Story = {
 }
 
 export const WithTitle: Story = {
-  render: () => {
+  render(props) {
     return (
-      <Card>
+      <Card {...props}>
         <CardHeader>
           <CardTitle>Card title</CardTitle>
           <CardDescription>Description of the title</CardDescription>
@@ -48,9 +48,9 @@ export const WithTitle: Story = {
 }
 
 export const WithFooter: Story = {
-  render: () => {
+  render(props) {
     return (
-      <Card>
+      <Card {...props}>
         <CardContent>This is a card with a footer</CardContent>
         <CardFooter>
           <Button className="w-full">Clock in</Button>
diff --git a/lib/foundations/dialog.stories.tsx b/lib/foundations/dialog.stories.tsx
index ffb4f4099..a83b7aed6 100644
--- a/lib/foundations/dialog.stories.tsx
+++ b/lib/foundations/dialog.stories.tsx
@@ -32,9 +32,9 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Basic: Story = {
-  render: () => {
+  render(props) {
     return (
-      <Dialog>
+      <Dialog {...props}>
         <DialogTrigger asChild>
           <Button variant="secondary">Edit Profile</Button>
         </DialogTrigger>
@@ -76,9 +76,9 @@ export const Basic: Story = {
 }
 
 export const WithCloseButton: Story = {
-  render: () => {
+  render(props) {
     return (
-      <Dialog>
+      <Dialog {...props}>
         <DialogTrigger asChild>
           <Button variant="secondary">Share</Button>
         </DialogTrigger>
diff --git a/lib/foundations/select.stories.tsx b/lib/foundations/select.stories.tsx
index dde4d4b69..1abb6f23e 100644
--- a/lib/foundations/select.stories.tsx
+++ b/lib/foundations/select.stories.tsx
@@ -26,9 +26,9 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Basic: Story = {
-  render: () => {
+  render(props) {
     return (
-      <Select>
+      <Select {...props}>
         <SelectTrigger className="w-[180px]">
           <SelectValue placeholder="Theme" />
         </SelectTrigger>
@@ -43,9 +43,9 @@ export const Basic: Story = {
 }
 
 export const Scrollable: Story = {
-  render: () => {
+  render(props) {
     return (
-      <Select>
+      <Select {...props}>
         <SelectTrigger className="w-[280px]">
           <SelectValue placeholder="Select a timezone" />
         </SelectTrigger>
diff --git a/package-lock.json b/package-lock.json
index 7d362178e..fecaccc60 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,11 +20,12 @@
         "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-tooltip": "^1.0.7",
+        "@tailwindcss/container-queries": "^0.1.1",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
         "lucide-react": "^0.373.0",
-        "react": "^18.3.0",
+        "react": "^18.2",
         "react-day-picker": "^8.10.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.51.3",
@@ -83,6 +84,7 @@
         "date-fns": "^3.6.0",
         "react": "^18.2",
         "react-day-picker": "^8.10.1",
+        "react-dom": "^18.2",
         "react-hook-form": "^7.51.3",
         "tailwind-merge": "^2.3.0",
         "tailwindcss": "^3.4.3",
@@ -6769,6 +6771,14 @@
         "@swc/counter": "^0.1.3"
       }
     },
+    "node_modules/@tailwindcss/container-queries": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz",
+      "integrity": "sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==",
+      "peerDependencies": {
+        "tailwindcss": ">=3.2.0"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.4",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
diff --git a/package.json b/package.json
index 9d299e812..123be0107 100644
--- a/package.json
+++ b/package.json
@@ -40,17 +40,18 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@tailwindcss/container-queries": "^0.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "lucide-react": "^0.373.0",
-    "react": "^18.3.0",
+    "react": "^18.2",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.51.3",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss-animate": "^1.0.7",
     "tailwindcss": "^3.4.3",
+    "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.4"
   },
   "peerDependencies": {
@@ -72,8 +73,8 @@
     "react-dom": "^18.2",
     "react-hook-form": "^7.51.3",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss-animate": "^1.0.7",
     "tailwindcss": "^3.4.3",
+    "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.4"
   },
   "devDependencies": {
@@ -100,14 +101,14 @@
     "eslint-plugin-react-hooks": "^4.6.1",
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-storybook": "^0.8.0",
+    "postcss": "^8.4.38",
     "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.14",
     "prettier-plugin-organize-imports": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "storybook": "^8.0.9",
     "typescript": "^5.4.5",
     "vite": "^5.2.10",
     "vite-plugin-dts": "^3.9.0",
-    "postcss": "^8.4.38",
     "vite-plugin-lib-inject-css": "^2.0.1"
   }
 }
\ No newline at end of file
diff --git a/src/examples/themes/theme-switcher.stories.tsx b/src/examples/themes/theme-switcher.stories.tsx
index 429c0860e..ba7d5eff8 100644
--- a/src/examples/themes/theme-switcher.stories.tsx
+++ b/src/examples/themes/theme-switcher.stories.tsx
@@ -14,7 +14,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Basic: Story = {
-  render: () => {
+  render(props) {
     return (
       <div className="max-w-96 bg-background p-10">
         <div className="flex flex-col gap-3 rounded-lg border bg-card p-6">
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 60b1c8274..68f6d5316 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -102,5 +102,8 @@ export default {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [
+    require("tailwindcss-animate"),
+    require("@tailwindcss/container-queries"),
+  ],
 } satisfies Config