diff --git a/README.md b/README.md
index 0f05c54..53a1288 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@ https://www.npmjs.com/package/@risc0/ui
 #### Prerequisites
 
 - Install [Node](https://nodejs.org/en) (≥ v20.x.x)
-- Install [bun](https://bun.sh/) (≥ v1.0.33)
+- Install [bun](https://bun.sh/) (≥ v1.1.7)
 
 > [!TIP]  
 > When making code changes, it helps to have the [Biome VSCode extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome) installed.
@@ -18,4 +18,4 @@ https://www.npmjs.com/package/@risc0/ui
 
 | Statements                  | Branches                | Functions                 | Lines             |
 | --------------------------- | ----------------------- | ------------------------- | ----------------- |
-| ![Statements](https://img.shields.io/badge/statements-37.99%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-73.33%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-51.85%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-37.99%25-red.svg?style=flat) |
+| ![Statements](https://img.shields.io/badge/statements-40.74%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-74.57%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-53.84%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-40.74%25-red.svg?style=flat) |
diff --git a/alert.test.tsx b/alert.test.tsx
index 627a325..cfaf381 100644
--- a/alert.test.tsx
+++ b/alert.test.tsx
@@ -1,58 +1,58 @@
-import { render, screen } from '@testing-library/react';
-import { Alert, AlertDescription, AlertTitle } from './alert';
+import { render, screen } from "@testing-library/react";
+import { Alert, AlertDescription, AlertTitle } from "./alert";
 
-describe('Alert', () => {
-  test('returns default class names when no variant is provided', () => {
+describe("Alert", () => {
+  test("returns default class names when no variant is provided", () => {
     render(<Alert />);
-    const alertElement = screen.getByRole('alert');
-    expect(alertElement.className).toContain('relative w-full rounded-lg border px-4 py-3 text-sm');
-    expect(alertElement.className).toContain('bg-background text-foreground');
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement.className).toContain("relative w-full rounded-lg border px-4 py-3 text-sm");
+    expect(alertElement.className).toContain("bg-background text-foreground");
   });
 
-  test('returns correct class names when destructive variant is provided', () => {
+  test("returns correct class names when destructive variant is provided", () => {
     render(<Alert variant="destructive" />);
-    const alertElement = screen.getByRole('alert');
-    expect(alertElement.className).toContain('relative w-full rounded-lg border px-4 py-3 text-sm');
-    expect(alertElement.className).toContain('border-destructive/50 text-destructive dark:border-destructive');
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement.className).toContain("relative w-full rounded-lg border px-4 py-3 text-sm");
+    expect(alertElement.className).toContain("border-destructive/50 text-destructive dark:border-destructive");
   });
 });
 
-describe('AlertTitle', () => {
-  test('renders the correct text when children prop is provided', () => {
+describe("AlertTitle", () => {
+  test("renders the correct text when children prop is provided", () => {
     render(<AlertTitle>Test Title</AlertTitle>);
-    const titleElement = screen.getByText('Test Title');
+    const titleElement = screen.getByText("Test Title");
     expect(titleElement).toBeInTheDocument();
   });
 
-  test('has correct default class names', () => {
+  test("has correct default class names", () => {
     render(<AlertTitle>Test Title</AlertTitle>);
-    const titleElement = screen.getByText('Test Title');
-    expect(titleElement.className).toContain('mb-1 font-medium leading-none');
+    const titleElement = screen.getByText("Test Title");
+    expect(titleElement.className).toContain("mb-1 font-medium leading-none");
   });
 
-  test('properly forwards classnames', () => {
-    render(<AlertTitle className='text-xl'>Test Title</AlertTitle>);
-    const titleElement = screen.getByText('Test Title');
-    expect(titleElement.className).toContain('text-xl');
+  test("properly forwards classnames", () => {
+    render(<AlertTitle className="text-xl">Test Title</AlertTitle>);
+    const titleElement = screen.getByText("Test Title");
+    expect(titleElement.className).toContain("text-xl");
   });
 });
 
-describe('AlertDescription', () => {
-  test('renders the correct text when children prop is provided', () => {
+describe("AlertDescription", () => {
+  test("renders the correct text when children prop is provided", () => {
     render(<AlertDescription>Test Description</AlertDescription>);
-    const descriptionElement = screen.getByText('Test Description');
+    const descriptionElement = screen.getByText("Test Description");
     expect(descriptionElement).toBeInTheDocument();
   });
 
-  test('has correct default class names', () => {
+  test("has correct default class names", () => {
     render(<AlertDescription>Test Description</AlertDescription>);
-    const descriptionElement = screen.getByText('Test Description');
-    expect(descriptionElement.className).toContain('text-sm [&_p]:leading-relaxed');
+    const descriptionElement = screen.getByText("Test Description");
+    expect(descriptionElement.className).toContain("text-sm [&_p]:leading-relaxed");
   });
 
-  test('properly forwards classnames', () => {
-    render(<AlertDescription className='text-xl'>Test Description</AlertDescription>);
-    const descriptionElement = screen.getByText('Test Description');
-    expect(descriptionElement.className).toContain('text-xl');
+  test("properly forwards classnames", () => {
+    render(<AlertDescription className="text-xl">Test Description</AlertDescription>);
+    const descriptionElement = screen.getByText("Test Description");
+    expect(descriptionElement.className).toContain("text-xl");
   });
-});
\ No newline at end of file
+});
diff --git a/avatar.test.tsx b/avatar.test.tsx
index 6b04a6b..0b13137 100644
--- a/avatar.test.tsx
+++ b/avatar.test.tsx
@@ -1,37 +1,49 @@
-import { render, screen } from '@testing-library/react';
-import { createRef } from 'react';
-import { Avatar, AvatarFallback } from './avatar';
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Avatar, AvatarFallback } from "./avatar";
 
-describe('Avatar', () => {
-  test('renders without crashing', () => {
+describe("Avatar", () => {
+  test("renders without crashing", () => {
     render(<Avatar />);
-    const avatarElement = screen.getByTestId('avatar');
+    const avatarElement = screen.getByTestId("avatar");
     expect(avatarElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
-    const ref = createRef<HTMLSpanElement>(); 
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLSpanElement>();
     render(<Avatar ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-describe('AvatarFallback', () => {
-  test('renders without crashing', () => {
-    render(<Avatar><AvatarFallback /></Avatar>);
-    const avatarFallbackElement = screen.getByTestId('avatar-fallback');
+describe("AvatarFallback", () => {
+  test("renders without crashing", () => {
+    render(
+      <Avatar>
+        <AvatarFallback />
+      </Avatar>,
+    );
+    const avatarFallbackElement = screen.getByTestId("avatar-fallback");
     expect(avatarFallbackElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
-    const ref = createRef<HTMLSpanElement>(); 
-    render(<Avatar><AvatarFallback ref={ref} /></Avatar>);
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLSpanElement>();
+    render(
+      <Avatar>
+        <AvatarFallback ref={ref} />
+      </Avatar>,
+    );
     expect(ref.current).not.toBeNull();
   });
 
-  test('displays the initials inside', () => {
-    render(<Avatar><AvatarFallback>CC</AvatarFallback></Avatar>);
-    const avatarFallbackText = screen.getByText('CC');
+  test("displays the initials inside", () => {
+    render(
+      <Avatar>
+        <AvatarFallback>CC</AvatarFallback>
+      </Avatar>,
+    );
+    const avatarFallbackText = screen.getByText("CC");
     expect(avatarFallbackText).toBeInTheDocument();
   });
-});
\ No newline at end of file
+});
diff --git a/badge.test.tsx b/badge.test.tsx
index eddcec1..b16434d 100644
--- a/badge.test.tsx
+++ b/badge.test.tsx
@@ -1,22 +1,22 @@
-import { render, screen } from '@testing-library/react';
-import { Badge } from './badge';
+import { render, screen } from "@testing-library/react";
+import { Badge } from "./badge";
 
-describe('Badge', () => {
-  test('renders without crashing', () => {
+describe("Badge", () => {
+  test("renders without crashing", () => {
     render(<Badge />);
-    const badgeElement = screen.getByTestId('badge');
+    const badgeElement = screen.getByTestId("badge");
     expect(badgeElement).toBeInTheDocument();
   });
 
-  test('applies correct classes based on variant prop', () => {
+  test("applies correct classes based on variant prop", () => {
     render(<Badge variant="secondary" />);
-    const badgeElement = screen.getByTestId('badge');
-    expect(badgeElement).toHaveClass('border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80');
+    const badgeElement = screen.getByTestId("badge");
+    expect(badgeElement).toHaveClass("border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80");
   });
 
-  test('forwards additional props to rendered div element', () => {
+  test("forwards additional props to rendered div element", () => {
     render(<Badge data-testid="badge" />);
-    const badgeElement = screen.getByTestId('badge');
+    const badgeElement = screen.getByTestId("badge");
     expect(badgeElement).toBeInTheDocument();
   });
-});
\ No newline at end of file
+});
diff --git a/breadcrumb.test.tsx b/breadcrumb.test.tsx
index 0bbfd94..b05c298 100644
--- a/breadcrumb.test.tsx
+++ b/breadcrumb.test.tsx
@@ -1,99 +1,99 @@
-import { render, screen } from '@testing-library/react';
-import { createRef } from 'react';
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
 import {
   Breadcrumb,
-  BreadcrumbList,
+  BreadcrumbEllipsis,
   BreadcrumbItem,
   BreadcrumbLink,
+  BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-} from './breadcrumb';
+} from "./breadcrumb";
 
-describe('Breadcrumb', () => {
-  test('renders without crashing', () => {
+describe("Breadcrumb", () => {
+  test("renders without crashing", () => {
     render(<Breadcrumb />);
-    const breadcrumbElement = screen.getByRole('navigation');
+    const breadcrumbElement = screen.getByRole("navigation");
     expect(breadcrumbElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
+  test("forwards ref correctly", () => {
     const ref = createRef<HTMLElement>();
     render(<Breadcrumb ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-describe('BreadcrumbList', () => {
-  test('renders without crashing', () => {
+describe("BreadcrumbList", () => {
+  test("renders without crashing", () => {
     render(<BreadcrumbList />);
-    const breadcrumbListElement = screen.getByRole('list');
+    const breadcrumbListElement = screen.getByRole("list");
     expect(breadcrumbListElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
+  test("forwards ref correctly", () => {
     const ref = createRef<HTMLOListElement>();
     render(<BreadcrumbList ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-describe('BreadcrumbItem', () => {
-  test('renders without crashing', () => {
+describe("BreadcrumbItem", () => {
+  test("renders without crashing", () => {
     render(<BreadcrumbItem />);
-    const breadcrumbItemElement = screen.getByRole('listitem');
+    const breadcrumbItemElement = screen.getByRole("listitem");
     expect(breadcrumbItemElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
+  test("forwards ref correctly", () => {
     const ref = createRef<HTMLLIElement>();
     render(<BreadcrumbItem ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-describe('BreadcrumbLink', () => {
-  test('renders without crashing', () => {
+describe("BreadcrumbLink", () => {
+  test("renders without crashing", () => {
     render(<BreadcrumbLink />);
-    const breadcrumbLinkElement = screen.getByTestId('breadcrumb-link');
+    const breadcrumbLinkElement = screen.getByTestId("breadcrumb-link");
     expect(breadcrumbLinkElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
+  test("forwards ref correctly", () => {
     const ref = createRef<HTMLAnchorElement>();
     render(<BreadcrumbLink ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-describe('BreadcrumbPage', () => {
-  test('renders without crashing', () => {
+describe("BreadcrumbPage", () => {
+  test("renders without crashing", () => {
     render(<BreadcrumbPage />);
-    const breadcrumbPageElement = screen.getByRole('link');
+    const breadcrumbPageElement = screen.getByRole("link");
     expect(breadcrumbPageElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
+  test("forwards ref correctly", () => {
     const ref = createRef<HTMLLIElement>();
     render(<BreadcrumbPage ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-describe('BreadcrumbSeparator', () => {
-  test('renders without crashing', () => {
+describe("BreadcrumbSeparator", () => {
+  test("renders without crashing", () => {
     render(<BreadcrumbSeparator />);
-    const breadcrumbSeparatorElement = screen.getByRole('presentation', {
-      hidden: true
+    const breadcrumbSeparatorElement = screen.getByRole("presentation", {
+      hidden: true,
     });
     expect(breadcrumbSeparatorElement).toBeInTheDocument();
   });
 });
 
-describe('BreadcrumbEllipsis', () => {
-  test('renders without crashing', () => {
+describe("BreadcrumbEllipsis", () => {
+  test("renders without crashing", () => {
     render(<BreadcrumbEllipsis />);
-    const breadcrumbEllipsisElement = screen.getByRole('presentation', {hidden: true});
+    const breadcrumbEllipsisElement = screen.getByRole("presentation", { hidden: true });
     expect(breadcrumbEllipsisElement).toBeInTheDocument();
   });
-});
\ No newline at end of file
+});
diff --git a/button.test.tsx b/button.test.tsx
index 6a2b6a6..c6b9a47 100644
--- a/button.test.tsx
+++ b/button.test.tsx
@@ -1,50 +1,50 @@
-import { render, screen } from '@testing-library/react';
-import { Button } from './button';
-import { createRef } from 'react';
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Button } from "./button";
 
-describe('Button', () => {
-  test('renders without crashing', () => {
+describe("Button", () => {
+  test("renders without crashing", () => {
     render(<Button />);
-    const buttonElement = screen.getByRole('button');
+    const buttonElement = screen.getByRole("button");
     expect(buttonElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
-    const ref = createRef<HTMLButtonElement>(); 
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLButtonElement>();
     render(<Button ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 
-  test('renders children correctly', () => {
+  test("renders children correctly", () => {
     render(<Button>Test Button</Button>);
-    const buttonElement = screen.getByText('Test Button');
+    const buttonElement = screen.getByText("Test Button");
     expect(buttonElement).toBeInTheDocument();
   });
 
-  test('renders startIcon correctly', () => {
-    const Icon = () => <span data-testid="start-icon"></span>;
+  test("renders startIcon correctly", () => {
+    const Icon = () => <span data-testid="start-icon" />;
     render(<Button startIcon={<Icon />} />);
-    const iconElement = screen.getByTestId('start-icon');
+    const iconElement = screen.getByTestId("start-icon");
     expect(iconElement).toBeInTheDocument();
   });
 
-  test('renders endIcon correctly', () => {
-    const Icon = () => <span data-testid="end-icon"></span>;
+  test("renders endIcon correctly", () => {
+    const Icon = () => <span data-testid="end-icon" />;
     render(<Button endIcon={<Icon />} />);
-    const iconElement = screen.getByTestId('end-icon');
+    const iconElement = screen.getByTestId("end-icon");
     expect(iconElement).toBeInTheDocument();
   });
 
-  test('renders Loader2Icon when isLoading is true', () => {
+  test("renders Loader2Icon when isLoading is true", () => {
     render(<Button isLoading />);
-    const loaderElement = screen.getByTestId('loader-icon');
+    const loaderElement = screen.getByTestId("loader-icon");
     expect(loaderElement).toBeInTheDocument();
   });
 
-  test('reanders Loader2Icon, but hidden when isLoading is false', () => {
+  test("reanders Loader2Icon, but hidden when isLoading is false", () => {
     render(<Button isLoading={false} />);
-    const loaderElement = screen.getByTestId('loader-icon');
+    const loaderElement = screen.getByTestId("loader-icon");
     expect(loaderElement).toBeInTheDocument();
-    expect(loaderElement).toHaveClass("opacity-0")
+    expect(loaderElement).toHaveClass("opacity-0");
   });
-});
\ No newline at end of file
+});
diff --git a/card.test.tsx b/card.test.tsx
index c3609b3..5496788 100644
--- a/card.test.tsx
+++ b/card.test.tsx
@@ -1,170 +1,170 @@
-import { render, screen } from '@testing-library/react';
-import { CardTitle, CardDescription, CardHeader, CardContent, CardFooter, Card } from './card';
+import { render, screen } from "@testing-library/react";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card";
 
-describe('Card', () => {
-  test('renders without crashing', () => {
+describe("Card", () => {
+  test("renders without crashing", () => {
     render(<Card />);
-    const cardElement = screen.getByRole('region');
+    const cardElement = screen.getByRole("region");
     expect(cardElement).toBeInTheDocument();
   });
 
-  test('applies correct classes', () => {
+  test("applies correct classes", () => {
     render(<Card />);
-    const cardElement = screen.getByRole('region');
-    expect(cardElement).toHaveClass('rounded-xl border bg-card text-card-foreground');
+    const cardElement = screen.getByRole("region");
+    expect(cardElement).toHaveClass("rounded-xl border bg-card text-card-foreground");
   });
 
-  test('correctly applies additional classes', () => {
-    const additionalClass = 'additional-class';
+  test("correctly applies additional classes", () => {
+    const additionalClass = "additional-class";
     render(<Card className={additionalClass} />);
-    const cardElement = screen.getByRole('region');
-    expect(cardElement).toHaveClass('rounded-xl border bg-card text-card-foreground', additionalClass);
+    const cardElement = screen.getByRole("region");
+    expect(cardElement).toHaveClass("rounded-xl border bg-card text-card-foreground", additionalClass);
   });
 
-  test('correctly applies additional props', () => {
-    const testId = 'card';
+  test("correctly applies additional props", () => {
+    const testId = "card";
     render(<Card data-testid={testId} />);
     const cardElement = screen.getByTestId(testId);
     expect(cardElement).toBeInTheDocument();
   });
 });
 
-describe('CardTitle', () => {
-  test('renders without crashing', () => {
+describe("CardTitle", () => {
+  test("renders without crashing", () => {
     render(<CardTitle />);
-    const cardTitleElement = screen.getByRole('heading');
+    const cardTitleElement = screen.getByRole("heading");
     expect(cardTitleElement).toBeInTheDocument();
   });
 
-  test('applies correct classes', () => {
+  test("applies correct classes", () => {
     render(<CardTitle />);
-    const cardTitleElement = screen.getByRole('heading');
-    expect(cardTitleElement).toHaveClass('font-semibold leading-none');
+    const cardTitleElement = screen.getByRole("heading");
+    expect(cardTitleElement).toHaveClass("font-semibold leading-none");
   });
 
-  test('correctly applies additional classes', () => {
-    const additionalClass = 'additional-class';
+  test("correctly applies additional classes", () => {
+    const additionalClass = "additional-class";
     render(<CardTitle className={additionalClass} />);
-    const cardTitleElement = screen.getByRole('heading');
-    expect(cardTitleElement).toHaveClass('font-semibold leading-none', additionalClass);
+    const cardTitleElement = screen.getByRole("heading");
+    expect(cardTitleElement).toHaveClass("font-semibold leading-none", additionalClass);
   });
 
-  test('correctly applies additional props', () => {
-    const testId = 'card-title';
+  test("correctly applies additional props", () => {
+    const testId = "card-title";
     render(<CardTitle data-testid={testId} />);
     const cardTitleElement = screen.getByTestId(testId);
     expect(cardTitleElement).toBeInTheDocument();
   });
 });
 
-describe('CardHeader', () => {
-  test('renders without crashing', () => {
+describe("CardHeader", () => {
+  test("renders without crashing", () => {
     render(<CardHeader />);
-    const cardHeaderElement = screen.getByTestId('card-header');
+    const cardHeaderElement = screen.getByTestId("card-header");
     expect(cardHeaderElement).toBeInTheDocument();
   });
 
-  test('applies correct classes', () => {
+  test("applies correct classes", () => {
     render(<CardHeader />);
-    const cardHeaderElement = screen.getByTestId('card-header');
-    expect(cardHeaderElement).toHaveClass('flex flex-col space-y-1.5 p-6');
+    const cardHeaderElement = screen.getByTestId("card-header");
+    expect(cardHeaderElement).toHaveClass("flex flex-col space-y-1.5 p-6");
   });
 
-  test('correctly applies additional classes', () => {
-    const additionalClass = 'additional-class';
+  test("correctly applies additional classes", () => {
+    const additionalClass = "additional-class";
     render(<CardHeader className={additionalClass} />);
-    const cardHeaderElement = screen.getByTestId('card-header');
-    expect(cardHeaderElement).toHaveClass('flex flex-col space-y-1.5 p-6', additionalClass);
+    const cardHeaderElement = screen.getByTestId("card-header");
+    expect(cardHeaderElement).toHaveClass("flex flex-col space-y-1.5 p-6", additionalClass);
   });
 
-  test('correctly applies additional props', () => {
-    const testId = 'card-header';
+  test("correctly applies additional props", () => {
+    const testId = "card-header";
     render(<CardHeader data-testid={testId} />);
     const cardHeaderElement = screen.getByTestId(testId);
     expect(cardHeaderElement).toBeInTheDocument();
   });
 });
 
-describe('CardDescription', () => {
-  test('renders without crashing', () => {
+describe("CardDescription", () => {
+  test("renders without crashing", () => {
     render(<CardDescription />);
-    const cardDescriptionElement = screen.getByTestId('card-description');
+    const cardDescriptionElement = screen.getByTestId("card-description");
     expect(cardDescriptionElement).toBeInTheDocument();
   });
 
-  test('applies correct classes', () => {
+  test("applies correct classes", () => {
     render(<CardDescription />);
-    const cardDescriptionElement = screen.getByTestId('card-description');
-    expect(cardDescriptionElement).toHaveClass('text-muted-foreground text-sm');
+    const cardDescriptionElement = screen.getByTestId("card-description");
+    expect(cardDescriptionElement).toHaveClass("text-muted-foreground text-sm");
   });
 
-  test('correctly applies additional classes', () => {
-    const additionalClass = 'additional-class';
+  test("correctly applies additional classes", () => {
+    const additionalClass = "additional-class";
     render(<CardDescription className={additionalClass} />);
-    const cardDescriptionElement = screen.getByTestId('card-description');
-    expect(cardDescriptionElement).toHaveClass('text-muted-foreground text-sm', additionalClass);
+    const cardDescriptionElement = screen.getByTestId("card-description");
+    expect(cardDescriptionElement).toHaveClass("text-muted-foreground text-sm", additionalClass);
   });
 
-  test('correctly applies additional props', () => {
-    const testId = 'card-description';
+  test("correctly applies additional props", () => {
+    const testId = "card-description";
     render(<CardDescription data-testid={testId} />);
     const cardDescriptionElement = screen.getByTestId(testId);
     expect(cardDescriptionElement).toBeInTheDocument();
   });
 });
 
-describe('CardContent', () => {
-  test('renders without crashing', () => {
+describe("CardContent", () => {
+  test("renders without crashing", () => {
     render(<CardContent />);
-    const cardContentElement = screen.getByTestId('card-content');
+    const cardContentElement = screen.getByTestId("card-content");
     expect(cardContentElement).toBeInTheDocument();
   });
 
-  test('applies correct classes', () => {
+  test("applies correct classes", () => {
     render(<CardContent />);
-    const cardContentElement = screen.getByTestId('card-content');
-    expect(cardContentElement).toHaveClass('p-6 pt-0');
+    const cardContentElement = screen.getByTestId("card-content");
+    expect(cardContentElement).toHaveClass("p-6 pt-0");
   });
 
-  test('correctly applies additional classes', () => {
-    const additionalClass = 'additional-class';
+  test("correctly applies additional classes", () => {
+    const additionalClass = "additional-class";
     render(<CardContent className={additionalClass} />);
-    const cardContentElement = screen.getByTestId('card-content');
-    expect(cardContentElement).toHaveClass('p-6 pt-0', additionalClass);
+    const cardContentElement = screen.getByTestId("card-content");
+    expect(cardContentElement).toHaveClass("p-6 pt-0", additionalClass);
   });
 
-  test('correctly applies additional props', () => {
-    const testId = 'card-content';
+  test("correctly applies additional props", () => {
+    const testId = "card-content";
     render(<CardContent data-testid={testId} />);
     const cardContentElement = screen.getByTestId(testId);
     expect(cardContentElement).toBeInTheDocument();
   });
 });
 
-describe('CardFooter', () => {
-  test('renders without crashing', () => {
+describe("CardFooter", () => {
+  test("renders without crashing", () => {
     render(<CardFooter />);
-    const cardFooterElement = screen.getByTestId('card-footer');
+    const cardFooterElement = screen.getByTestId("card-footer");
     expect(cardFooterElement).toBeInTheDocument();
   });
 
-  test('applies correct classes', () => {
+  test("applies correct classes", () => {
     render(<CardFooter />);
-    const cardFooterElement = screen.getByTestId('card-footer');
-    expect(cardFooterElement).toHaveClass('flex items-center p-6 pt-0');
+    const cardFooterElement = screen.getByTestId("card-footer");
+    expect(cardFooterElement).toHaveClass("flex items-center p-6 pt-0");
   });
 
-  test('correctly applies additional classes', () => {
-    const additionalClass = 'additional-class';
+  test("correctly applies additional classes", () => {
+    const additionalClass = "additional-class";
     render(<CardFooter className={additionalClass} />);
-    const cardFooterElement = screen.getByTestId('card-footer');
-    expect(cardFooterElement).toHaveClass('flex items-center p-6 pt-0', additionalClass);
+    const cardFooterElement = screen.getByTestId("card-footer");
+    expect(cardFooterElement).toHaveClass("flex items-center p-6 pt-0", additionalClass);
   });
 
-  test('correctly applies additional props', () => {
-    const testId = 'card-footer';
+  test("correctly applies additional props", () => {
+    const testId = "card-footer";
     render(<CardFooter data-testid={testId} />);
     const cardFooterElement = screen.getByTestId(testId);
     expect(cardFooterElement).toBeInTheDocument();
   });
-});
\ No newline at end of file
+});
diff --git a/checkbox.test.tsx b/checkbox.test.tsx
index fd0252d..bac3160 100644
--- a/checkbox.test.tsx
+++ b/checkbox.test.tsx
@@ -1,29 +1,29 @@
-import { render, screen } from '@testing-library/react';
-import { Checkbox } from './checkbox';
-import { createRef } from 'react';
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Checkbox } from "./checkbox";
 
-describe('Checkbox', () => {
-  test('renders without crashing', () => {
+describe("Checkbox", () => {
+  test("renders without crashing", () => {
     render(<Checkbox />);
-    const checkboxElement = screen.getByRole('checkbox');
+    const checkboxElement = screen.getByRole("checkbox");
     expect(checkboxElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
-    const ref = createRef<HTMLButtonElement>(); 
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLButtonElement>();
     render(<Checkbox ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 
-  test('applies correct class names', () => {
+  test("applies correct class names", () => {
     render(<Checkbox className="test-class" />);
-    const checkboxElement = screen.getByRole('checkbox');
-    expect(checkboxElement).toHaveClass('test-class');
+    const checkboxElement = screen.getByRole("checkbox");
+    expect(checkboxElement).toHaveClass("test-class");
   });
 
-  test('renders CheckIcon when checked', () => {
+  test("renders CheckIcon when checked", () => {
     render(<Checkbox checked />);
-    const checkIconElement = screen.getByTestId('check-icon');
+    const checkIconElement = screen.getByTestId("check-icon");
     expect(checkIconElement).toBeInTheDocument();
   });
-});
\ No newline at end of file
+});
diff --git a/constants.test.ts b/constants.test.ts
index 1f87ad2..4447ad5 100644
--- a/constants.test.ts
+++ b/constants.test.ts
@@ -1,13 +1,13 @@
-import { RISC0_PRIVACY_POLICY_URL, RISC0_TERMS_OF_SERVICE_URL } from './constants';
+import { RISC0_PRIVACY_POLICY_URL, RISC0_TERMS_OF_SERVICE_URL } from "./constants";
 
-describe('Constants', () => {
-  it('should have correct RISC0_PRIVACY_POLICY_URL', () => {
-    expect(typeof RISC0_PRIVACY_POLICY_URL).toBe('string');
-    expect(RISC0_PRIVACY_POLICY_URL).toBe('https://www.risczero.com/policy');
+describe("Constants", () => {
+  it("should have correct RISC0_PRIVACY_POLICY_URL", () => {
+    expect(typeof RISC0_PRIVACY_POLICY_URL).toBe("string");
+    expect(RISC0_PRIVACY_POLICY_URL).toBe("https://www.risczero.com/policy");
   });
 
-  it('should have correct RISC0_TERMS_OF_SERVICE_URL', () => {
-    expect(typeof RISC0_TERMS_OF_SERVICE_URL).toBe('string');
-    expect(RISC0_TERMS_OF_SERVICE_URL).toBe('https://www.risczero.com/terms-of-service');
+  it("should have correct RISC0_TERMS_OF_SERVICE_URL", () => {
+    expect(typeof RISC0_TERMS_OF_SERVICE_URL).toBe("string");
+    expect(RISC0_TERMS_OF_SERVICE_URL).toBe("https://www.risczero.com/terms-of-service");
   });
-});
\ No newline at end of file
+});
diff --git a/hooks/use-event-listener.test.ts b/hooks/use-event-listener.test.ts
index 74ea2b2..2ff479e 100644
--- a/hooks/use-event-listener.test.ts
+++ b/hooks/use-event-listener.test.ts
@@ -1,27 +1,27 @@
-import { renderHook, act } from '@testing-library/react-hooks';
-import { useRef, type RefObject } from 'react';
-import { useEventListener } from './use-event-listener';
-import { vi } from 'vitest';
+import { act, renderHook } from "@testing-library/react-hooks";
+import { type RefObject, useRef } from "react";
+import { vi } from "vitest";
+import { useEventListener } from "./use-event-listener";
 
-describe('useEventListener', () => {
-  it('should call handler when the event is triggered', () => {
+describe("useEventListener", () => {
+  it("should call handler when the event is triggered", () => {
     const handler = vi.fn();
-    const event = new Event('click');
-    const ref: RefObject<HTMLDivElement> = { current: document.createElement('div') };
+    const event = new Event("click");
+    const ref: RefObject<HTMLDivElement> = { current: document.createElement("div") };
 
-    renderHook(() => useEventListener('click', handler, ref));
+    renderHook(() => useEventListener("click", handler, ref));
 
     ref.current?.dispatchEvent(event);
 
     expect(handler).toHaveBeenCalledWith(event);
   });
 
-  it('should not call handler after unmount', () => {
+  it("should not call handler after unmount", () => {
     const handler = vi.fn();
-    const event = new Event('click');
-    const ref: RefObject<HTMLDivElement> = { current: document.createElement('div') };
+    const event = new Event("click");
+    const ref: RefObject<HTMLDivElement> = { current: document.createElement("div") };
 
-    const { unmount } = renderHook(() => useEventListener('click', handler, ref));
+    const { unmount } = renderHook(() => useEventListener("click", handler, ref));
 
     unmount();
 
@@ -30,12 +30,12 @@ describe('useEventListener', () => {
     expect(handler).not.toHaveBeenCalled();
   });
 
-  it('adds event listener to window when no element is provided', () => {
+  it("adds event listener to window when no element is provided", () => {
     const handler = vi.fn();
-    const { unmount } = renderHook(() => useEventListener('click', handler));
+    const { unmount } = renderHook(() => useEventListener("click", handler));
 
     act(() => {
-      window.dispatchEvent(new Event('click'));
+      window.dispatchEvent(new Event("click"));
     });
 
     expect(handler).toHaveBeenCalled();
@@ -43,46 +43,45 @@ describe('useEventListener', () => {
     unmount();
   });
 
-  it('adds event listener to provided element', () => {
+  it("adds event listener to provided element", () => {
     const handler = vi.fn();
     const { result, unmount } = renderHook(() => {
-      const ref = useRef<HTMLDivElement>(document.createElement('div'));
-      useEventListener('click', handler, ref);
+      const ref = useRef<HTMLDivElement>(document.createElement("div"));
+      useEventListener("click", handler, ref);
       return ref;
     });
-  
+
     act(() => {
-      result.current?.current?.dispatchEvent(new Event('click'));
+      result.current?.current?.dispatchEvent(new Event("click"));
     });
-  
+
     expect(handler).toHaveBeenCalled();
-  
+
     unmount();
   });
 
-  it('removes event listener when component unmounts', () => {
+  it("removes event listener when component unmounts", () => {
     const handler = vi.fn();
-    const { unmount } = renderHook(() => useEventListener('click', handler));
+    const { unmount } = renderHook(() => useEventListener("click", handler));
 
     unmount();
 
     act(() => {
-      window.dispatchEvent(new Event('click'));
+      window.dispatchEvent(new Event("click"));
     });
 
     expect(handler).not.toHaveBeenCalled();
   });
 
-  it('updates event listener when handler changes', () => {
+  it("updates event listener when handler changes", () => {
     const handler1 = vi.fn();
     const handler2 = vi.fn();
-    const { rerender, unmount } = renderHook(
-      ({ handler }) => useEventListener('click', handler),
-      { initialProps: { handler: handler1 } }
-    );
+    const { rerender, unmount } = renderHook(({ handler }) => useEventListener("click", handler), {
+      initialProps: { handler: handler1 },
+    });
 
     act(() => {
-      window.dispatchEvent(new Event('click'));
+      window.dispatchEvent(new Event("click"));
     });
 
     expect(handler1).toHaveBeenCalled();
@@ -90,11 +89,11 @@ describe('useEventListener', () => {
     rerender({ handler: handler2 });
 
     act(() => {
-      window.dispatchEvent(new Event('click'));
+      window.dispatchEvent(new Event("click"));
     });
 
     expect(handler2).toHaveBeenCalled();
 
     unmount();
   });
-});
\ No newline at end of file
+});
diff --git a/hooks/use-mounted.test.ts b/hooks/use-mounted.test.ts
index 120c411..c28050c 100644
--- a/hooks/use-mounted.test.ts
+++ b/hooks/use-mounted.test.ts
@@ -1,12 +1,12 @@
-import { renderHook } from '@testing-library/react-hooks';
-import { useMounted } from './use-mounted';
+import { renderHook } from "@testing-library/react-hooks";
+import { useMounted } from "./use-mounted";
 
-describe('useMounted', () => {
-   it('should return true after the component has been mounted', () => {
+describe("useMounted", () => {
+  it("should return true after the component has been mounted", () => {
     const { result, waitForNextUpdate } = renderHook(() => useMounted());
 
     waitForNextUpdate().then(() => {
       expect(result.current).toBe(true);
     });
   });
-});
\ No newline at end of file
+});
diff --git a/input.test.tsx b/input.test.tsx
index 20f9c2f..5ff8cdd 100644
--- a/input.test.tsx
+++ b/input.test.tsx
@@ -1,31 +1,31 @@
-import { render, screen } from '@testing-library/react';
-import { Input } from './input';
-import { createRef } from 'react';
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Input } from "./input";
 
-describe('Input', () => {
-  test('renders without crashing', () => {
+describe("Input", () => {
+  test("renders without crashing", () => {
     render(<Input />);
-    const inputElement = screen.getByRole('textbox');
+    const inputElement = screen.getByRole("textbox");
     expect(inputElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
-    const ref = createRef<HTMLInputElement>(); 
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLInputElement>();
     render(<Input ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 
-  test('renders startIcon correctly', () => {
-    const StartIcon = () => <div data-testid="start-icon"></div>;
+  test("renders startIcon correctly", () => {
+    const StartIcon = () => <div data-testid="start-icon" />;
     render(<Input startIcon={<StartIcon />} />);
-    const startIconElement = screen.getByTestId('start-icon');
+    const startIconElement = screen.getByTestId("start-icon");
     expect(startIconElement).toBeInTheDocument();
   });
 
-  test('renders endIcon correctly', () => {
-    const EndIcon = () => <div data-testid="end-icon"></div>;
+  test("renders endIcon correctly", () => {
+    const EndIcon = () => <div data-testid="end-icon" />;
     render(<Input endIcon={<EndIcon />} />);
-    const endIconElement = screen.getByTestId('end-icon');
+    const endIconElement = screen.getByTestId("end-icon");
     expect(endIconElement).toBeInTheDocument();
   });
-});
\ No newline at end of file
+});
diff --git a/label.test.tsx b/label.test.tsx
index 4e2b2a1..852d51c 100644
--- a/label.test.tsx
+++ b/label.test.tsx
@@ -1,17 +1,17 @@
-import { render, screen } from '@testing-library/react';
-import { Label } from './label';
-import { createRef } from 'react';
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Label } from "./label";
 
-describe('Label', () => {
-  test('renders without crashing', () => {
+describe("Label", () => {
+  test("renders without crashing", () => {
     render(<Label />);
-    const labelElement = screen.getByTestId('label');
+    const labelElement = screen.getByTestId("label");
     expect(labelElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
-    const ref = createRef<HTMLLabelElement>(); 
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLLabelElement>();
     render(<Label ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
-});
\ No newline at end of file
+});
diff --git a/loader.test.tsx b/loader.test.tsx
index 64c7fd7..721304e 100644
--- a/loader.test.tsx
+++ b/loader.test.tsx
@@ -1,23 +1,23 @@
-import { Loader } from './loader';
-import { render, screen } from '@testing-library/react';
+import { render, screen } from "@testing-library/react";
+import { Loader } from "./loader";
 
-describe('Loader', () => {
-  test('renders image without crashing', () => {
+describe("Loader", () => {
+  test("renders image without crashing", () => {
     render(<Loader />);
-    const loaderImage = screen.getByAltText('Loading');
+    const loaderImage = screen.getByAltText("Loading");
     expect(loaderImage).toBeInTheDocument();
   });
 
-  test('displays default loading text when no loadingText prop is provided', () => {
+  test("displays default loading text when no loadingText prop is provided", () => {
     render(<Loader />);
-    const loadingText = screen.getByText('Loading…');
+    const loadingText = screen.getByText("Loading…");
     expect(loadingText).toBeInTheDocument();
   });
 
-  test('displays custom loading text when loadingText prop is provided', () => {
-    const customText = 'Custom loading text';
+  test("displays custom loading text when loadingText prop is provided", () => {
+    const customText = "Custom loading text";
     render(<Loader loadingText={customText} />);
     const loadingText = screen.getByText(customText);
     expect(loadingText).toBeInTheDocument();
   });
-});
\ No newline at end of file
+});
diff --git a/package.json b/package.json
index a42c0cb..66b0f45 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@risc0/ui",
-  "version": "0.0.70",
+  "version": "0.0.71",
   "sideEffects": false,
   "type": "module",
   "scripts": {
diff --git a/progress.test.tsx b/progress.test.tsx
index 8f7875d..81291ce 100644
--- a/progress.test.tsx
+++ b/progress.test.tsx
@@ -1,24 +1,24 @@
-import { Progress } from './progress';
-import { render, screen } from '@testing-library/react';
+import { render, screen } from "@testing-library/react";
+import { Progress } from "./progress";
 
-describe('Progress', () => {
-  test('renders without crashing', () => {
+describe("Progress", () => {
+  test("renders without crashing", () => {
     render(<Progress />);
-    const progressElement = screen.getByRole('progressbar');
+    const progressElement = screen.getByRole("progressbar");
     expect(progressElement).toBeInTheDocument();
   });
 
-  test('renders with correct value prop', () => {
+  test("renders with correct value prop", () => {
     const value = 50;
     render(<Progress value={value} />);
-    const progressIndicator = screen.getByRole('progressbar').firstChild; // select the Indicator component
+    const progressIndicator = screen.getByRole("progressbar").firstChild; // select the Indicator component
     expect(progressIndicator).toHaveStyle(`transform: translateX(-${100 - value}%)`);
   });
 
-  test('applies correct styles based on value prop', () => {
+  test("applies correct styles based on value prop", () => {
     const value = 75;
     render(<Progress value={value} />);
-    const progressIndicator = screen.getByRole('progressbar').firstChild; // select the Indicator component
+    const progressIndicator = screen.getByRole("progressbar").firstChild; // select the Indicator component
     expect(progressIndicator).toHaveStyle(`transform: translateX(-${100 - value}%)`);
   });
-});
\ No newline at end of file
+});
diff --git a/required.test.tsx b/required.test.tsx
index 357e888..ca842ce 100644
--- a/required.test.tsx
+++ b/required.test.tsx
@@ -1,22 +1,22 @@
-import { Required } from './required';
-import { render, screen } from '@testing-library/react';
+import { render, screen } from "@testing-library/react";
+import { Required } from "./required";
 
-describe('Required', () => {
-  test('renders without crashing', () => {
+describe("Required", () => {
+  test("renders without crashing", () => {
     render(<Required />);
-    const requiredElement = screen.getByText('*');
+    const requiredElement = screen.getByText("*");
     expect(requiredElement).toBeInTheDocument();
   });
 
-  test('displays an asterisk (*)', () => {
+  test("displays an asterisk (*)", () => {
     render(<Required />);
-    const requiredElement = screen.getByText('*');
-    expect(requiredElement.textContent).toBe('*');
+    const requiredElement = screen.getByText("*");
+    expect(requiredElement.textContent).toBe("*");
   });
 
   test('has a class name of "text-destructive"', () => {
     render(<Required />);
-    const requiredElement = screen.getByText('*');
-    expect(requiredElement).toHaveClass('text-destructive');
+    const requiredElement = screen.getByText("*");
+    expect(requiredElement).toHaveClass("text-destructive");
   });
-});
\ No newline at end of file
+});
diff --git a/separator.test.tsx b/separator.test.tsx
index 4205f2e..6e6258c 100644
--- a/separator.test.tsx
+++ b/separator.test.tsx
@@ -1,22 +1,22 @@
-import { render, screen } from '@testing-library/react';
-import { Separator } from './separator';
+import { render, screen } from "@testing-library/react";
+import { Separator } from "./separator";
 
-describe('Separator', () => {
-  it('renders without crashing', () => {
+describe("Separator", () => {
+  it("renders without crashing", () => {
     render(<Separator />);
-    const separatorElement = screen.getByRole('separator');
+    const separatorElement = screen.getByRole("separator");
     expect(separatorElement).toBeInTheDocument();
   });
 
-  it('renders with default props', () => {
+  it("renders with default props", () => {
     render(<Separator />);
-    const separatorElement = screen.getByRole('separator');
-    expect(separatorElement).toHaveClass('shrink-0 bg-border h-[1px] w-full');
+    const separatorElement = screen.getByRole("separator");
+    expect(separatorElement).toHaveClass("shrink-0 bg-border h-[1px] w-full");
   });
 
-  it('renders correctly with custom props', () => {
+  it("renders correctly with custom props", () => {
     render(<Separator orientation="vertical" />);
-    const separatorElement = screen.getByRole('separator');
-    expect(separatorElement).toHaveClass('shrink-0 bg-border h-full w-[1px]');
+    const separatorElement = screen.getByRole("separator");
+    expect(separatorElement).toHaveClass("shrink-0 bg-border h-full w-[1px]");
   });
-});
\ No newline at end of file
+});
diff --git a/setupTests.ts b/setup-tests.ts
similarity index 100%
rename from setupTests.ts
rename to setup-tests.ts
diff --git a/skeleton.test.tsx b/skeleton.test.tsx
index b639ad7..dc36757 100644
--- a/skeleton.test.tsx
+++ b/skeleton.test.tsx
@@ -1,30 +1,30 @@
-import { Skeleton } from './skeleton';
-import { render, screen } from '@testing-library/react';
+import { render, screen } from "@testing-library/react";
+import { Skeleton } from "./skeleton";
 
-describe('Skeleton', () => {
-  test('renders without crashing', () => {
+describe("Skeleton", () => {
+  test("renders without crashing", () => {
     render(<Skeleton />);
-    const skeletonElement = screen.getByRole('presentation');
+    const skeletonElement = screen.getByRole("presentation");
     expect(skeletonElement).toBeInTheDocument();
   });
 
-  test('has correct default classes', () => {
+  test("has correct default classes", () => {
     render(<Skeleton />);
-    const skeletonElement = screen.getByRole('presentation');
-    expect(skeletonElement).toHaveClass('animate-pulse rounded-md bg-primary/10');
+    const skeletonElement = screen.getByRole("presentation");
+    expect(skeletonElement).toHaveClass("animate-pulse rounded-md bg-primary/10");
   });
 
-  test('correctly applies additional classes', () => {
-    const additionalClass = 'additional-class';
+  test("correctly applies additional classes", () => {
+    const additionalClass = "additional-class";
     render(<Skeleton className={additionalClass} />);
-    const skeletonElement = screen.getByRole('presentation');
-    expect(skeletonElement).toHaveClass('animate-pulse rounded-md bg-primary/10', additionalClass);
+    const skeletonElement = screen.getByRole("presentation");
+    expect(skeletonElement).toHaveClass("animate-pulse rounded-md bg-primary/10", additionalClass);
   });
 
-  test('correctly applies additional props', () => {
-    const testId = 'skeleton';
+  test("correctly applies additional props", () => {
+    const testId = "skeleton";
     render(<Skeleton data-testid={testId} />);
     const skeletonElement = screen.getByTestId(testId);
     expect(skeletonElement).toBeInTheDocument();
   });
-});
\ No newline at end of file
+});
diff --git a/slider.test.tsx b/slider.test.tsx
index 6605fcd..99ba262 100644
--- a/slider.test.tsx
+++ b/slider.test.tsx
@@ -1,41 +1,43 @@
-import { render, screen } from '@testing-library/react';
-import { Slider } from './slider';
-import { createRef } from 'react';
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Slider } from "./slider";
 
-describe('Slider', () => {
-  test('renders without crashing', () => {
+describe("Slider", () => {
+  test("renders without crashing", () => {
     render(<Slider />);
-    const sliderElement = screen.getByRole('slider');
+    const sliderElement = screen.getByRole("slider");
     expect(sliderElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
+  test("forwards ref correctly", () => {
     const ref = createRef<HTMLDivElement>();
     render(<Slider ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 
-  test('applies correct class names to root element', () => {
+  test("applies correct class names to root element", () => {
     render(<Slider />);
-    const sliderElement = screen.getByTestId('slider-root');
-    expect(sliderElement).toHaveClass('relative flex w-full touch-none select-none items-center');
+    const sliderElement = screen.getByTestId("slider-root");
+    expect(sliderElement).toHaveClass("relative flex w-full touch-none select-none items-center");
   });
 
-  test('applies correct class names to Track element', () => {
+  test("applies correct class names to Track element", () => {
     render(<Slider />);
-    const trackElement = screen.getByTestId('slider-track');
-    expect(trackElement).toHaveClass('relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20');
+    const trackElement = screen.getByTestId("slider-track");
+    expect(trackElement).toHaveClass("relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20");
   });
 
-  test('applies correct class names to Range element', () => {
+  test("applies correct class names to Range element", () => {
     render(<Slider />);
-    const rangeElement = screen.getByTestId('slider-range');
-    expect(rangeElement).toHaveClass('absolute h-full bg-primary');
+    const rangeElement = screen.getByTestId("slider-range");
+    expect(rangeElement).toHaveClass("absolute h-full bg-primary");
   });
 
-  test('applies correct class names to Thumb element', () => {
+  test("applies correct class names to Thumb element", () => {
     render(<Slider />);
-    const thumbElement = screen.getByTestId('slider-thumb');
-    expect(thumbElement).toHaveClass('block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring');
+    const thumbElement = screen.getByTestId("slider-thumb");
+    expect(thumbElement).toHaveClass(
+      "block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+    );
   });
-});
\ No newline at end of file
+});
diff --git a/switch.test.tsx b/switch.test.tsx
index e664c2a..5bfb421 100644
--- a/switch.test.tsx
+++ b/switch.test.tsx
@@ -1,23 +1,25 @@
-import { render, screen } from '@testing-library/react';
-import { Switch } from './switch';
-import { createRef } from 'react';
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Switch } from "./switch";
 
-describe('Switch', () => {
-  test('renders without crashing', () => {
+describe("Switch", () => {
+  test("renders without crashing", () => {
     render(<Switch />);
-    const switchElement = screen.getByRole('switch');
+    const switchElement = screen.getByRole("switch");
     expect(switchElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
+  test("forwards ref correctly", () => {
     const ref = createRef<HTMLButtonElement>();
     render(<Switch ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 
-  test('applies correct class names based on state', () => {
+  test("applies correct class names based on state", () => {
     render(<Switch />);
-    const switchElement = screen.getByRole('switch');
-    expect(switchElement).toHaveClass('peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors disabled:cursor-not-allowed data-[state=checked]:bg-primary data-[state=unchecked]:bg-input disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background');
+    const switchElement = screen.getByRole("switch");
+    expect(switchElement).toHaveClass(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors disabled:cursor-not-allowed data-[state=checked]:bg-primary data-[state=unchecked]:bg-input disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    );
   });
-});
\ No newline at end of file
+});
diff --git a/table.test.tsx b/table.test.tsx
index 3549cad..7e0d0b1 100644
--- a/table.test.tsx
+++ b/table.test.tsx
@@ -1,117 +1,115 @@
-import { render, screen } from '@testing-library/react';
-import { createRef } from 'react';
-import { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from './table';
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table";
 
-describe('Table', () => {
-  test('renders without crashing', () => {
+describe("Table", () => {
+  test("renders without crashing", () => {
     render(<Table />);
-    const tableElement = screen.getByRole('table');
+    const tableElement = screen.getByRole("table");
     expect(tableElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
-    const ref = createRef<HTMLTableElement>(); 
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLTableElement>();
     render(<Table ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-describe('TableHeader', () => {
-  test('renders without crashing', () => {
+describe("TableHeader", () => {
+  test("renders without crashing", () => {
     render(<TableHeader />);
-    const tableHeaderElement = screen.getByRole('rowgroup');
+    const tableHeaderElement = screen.getByRole("rowgroup");
     expect(tableHeaderElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
-    const ref = createRef<HTMLTableSectionElement>(); 
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLTableSectionElement>();
     render(<TableHeader ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-describe('TableBody', () => {
-  test('renders without crashing', () => {
+describe("TableBody", () => {
+  test("renders without crashing", () => {
     render(<TableBody />);
-    const tableBodyElement = screen.getByRole('rowgroup');
+    const tableBodyElement = screen.getByRole("rowgroup");
     expect(tableBodyElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
-    const ref = createRef<HTMLTableSectionElement>(); 
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLTableSectionElement>();
     render(<TableBody ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-
-describe('TableFooter', () => {
-  test('renders without crashing', () => {
+describe("TableFooter", () => {
+  test("renders without crashing", () => {
     render(<TableFooter />);
-    const tableFooterElement = screen.getByRole('rowgroup');
+    const tableFooterElement = screen.getByRole("rowgroup");
     expect(tableFooterElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
-    const ref = createRef<HTMLTableSectionElement>(); 
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLTableSectionElement>();
     render(<TableFooter ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-
-describe('TableHead', () => {
-  test('renders without crashing', () => {
+describe("TableHead", () => {
+  test("renders without crashing", () => {
     render(<TableHead />);
-    const tableHeadElement = screen.getByRole('columnheader');
+    const tableHeadElement = screen.getByRole("columnheader");
     expect(tableHeadElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
-    const ref = createRef<HTMLTableCellElement>(); 
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLTableCellElement>();
     render(<TableHead ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-describe('TableRow', () => {
-  test('renders without crashing', () => {
+describe("TableRow", () => {
+  test("renders without crashing", () => {
     render(<TableRow />);
-    const tableRowElement = screen.getByRole('row');
+    const tableRowElement = screen.getByRole("row");
     expect(tableRowElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
-    const ref = createRef<HTMLTableRowElement>(); 
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLTableRowElement>();
     render(<TableRow ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-describe('TableCell', () => {
-  test('renders without crashing', () => {
+describe("TableCell", () => {
+  test("renders without crashing", () => {
     render(<TableCell />);
-    const tableCellElement = screen.getByRole('cell');
+    const tableCellElement = screen.getByRole("cell");
     expect(tableCellElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
-    const ref = createRef<HTMLTableCellElement>(); 
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLTableCellElement>();
     render(<TableCell ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
 });
 
-describe('TableCaption', () => {
-  test('renders without crashing', () => {
+describe("TableCaption", () => {
+  test("renders without crashing", () => {
     render(<TableCaption />);
-    const tableCaptionElement = screen.getByRole('caption');
+    const tableCaptionElement = screen.getByRole("caption");
     expect(tableCaptionElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
-    const ref = createRef<HTMLTableCellElement>(); 
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLTableCellElement>();
     render(<TableCaption ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
-});
\ No newline at end of file
+});
diff --git a/tabs.test.tsx b/tabs.test.tsx
new file mode 100644
index 0000000..edfe606
--- /dev/null
+++ b/tabs.test.tsx
@@ -0,0 +1,75 @@
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+
+describe("TabsList", () => {
+  test("renders without crashing", () => {
+    render(
+      <Tabs>
+        <TabsList />
+      </Tabs>,
+    );
+    const tabsListElement = screen.getByTestId("tabs-list");
+    expect(tabsListElement).toBeInTheDocument();
+  });
+
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(
+      <Tabs>
+        <TabsList ref={ref} />
+      </Tabs>,
+    );
+    expect(ref.current).not.toBeNull();
+  });
+});
+
+describe("TabsTrigger", () => {
+  test("renders without crashing", () => {
+    render(
+      <Tabs>
+        <TabsList>
+          <TabsTrigger value={""}>trigger</TabsTrigger>
+        </TabsList>
+      </Tabs>,
+    );
+    const tabsTriggerElement = screen.getByRole("tab");
+    expect(tabsTriggerElement).toBeInTheDocument();
+  });
+
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(
+      <Tabs>
+        <TabsList>
+          <TabsTrigger ref={ref} value={""}>
+            trigger
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>,
+    );
+    expect(ref.current).not.toBeNull();
+  });
+});
+
+describe("TabsContent", () => {
+  test("renders without crashing", () => {
+    render(
+      <Tabs>
+        <TabsContent value={""} />
+      </Tabs>,
+    );
+    const tabsContentElement = screen.getByRole("tabpanel", { hidden: true });
+    expect(tabsContentElement).toBeInTheDocument();
+  });
+
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(
+      <Tabs>
+        <TabsContent ref={ref} value={""} />
+      </Tabs>,
+    );
+    expect(ref.current).not.toBeNull();
+  });
+});
diff --git a/tabs.tsx b/tabs.tsx
index 0fbbf91..982d2d4 100644
--- a/tabs.tsx
+++ b/tabs.tsx
@@ -10,6 +10,7 @@ const TabsList = forwardRef<ElementRef<typeof TabsPrimitive.List>, ComponentProp
   ({ className, ...rest }, ref) => (
     <TabsPrimitive.List
       ref={ref}
+      data-testid="tabs-list"
       className={cn(
         "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
         className,
diff --git a/textarea.test.tsx b/textarea.test.tsx
index 4ac2248..d80f9a7 100644
--- a/textarea.test.tsx
+++ b/textarea.test.tsx
@@ -1,17 +1,17 @@
-import { render, screen } from '@testing-library/react';
-import { Textarea } from './textarea';
-import { createRef } from 'react';
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Textarea } from "./textarea";
 
-describe('Textarea', () => {
-  test('renders without crashing', () => {
+describe("Textarea", () => {
+  test("renders without crashing", () => {
     render(<Textarea />);
-    const textareaElement = screen.getByRole('textbox');
+    const textareaElement = screen.getByRole("textbox");
     expect(textareaElement).toBeInTheDocument();
   });
 
-  test('forwards ref correctly', () => {
-    const ref = createRef<HTMLTextAreaElement>(); 
+  test("forwards ref correctly", () => {
+    const ref = createRef<HTMLTextAreaElement>();
     render(<Textarea ref={ref} />);
     expect(ref.current).not.toBeNull();
   });
-});
\ No newline at end of file
+});
diff --git a/utils/join-words.test.ts b/utils/join-words.test.ts
index 9187304..56066ce 100644
--- a/utils/join-words.test.ts
+++ b/utils/join-words.test.ts
@@ -1,29 +1,29 @@
-import { joinWords } from './join-words';
+import { joinWords } from "./join-words";
 
-describe('joinWords', () => {
-  it('should return an empty string if the input is empty', () => {
-    expect(joinWords('')).toBe('');
+describe("joinWords", () => {
+  it("should return an empty string if the input is empty", () => {
+    expect(joinWords("")).toBe("");
   });
 
-  it('should return an empty string if the input is null', () => {
+  it("should return an empty string if the input is null", () => {
     // @ts-expect-error -- tests
-    expect(joinWords(null)).toBe('');
+    expect(joinWords(null)).toBe("");
   });
 
-  it('should return an empty string if the input is undefined', () => {
+  it("should return an empty string if the input is undefined", () => {
     // @ts-expect-error -- tests
-    expect(joinWords(undefined)).toBe('');
+    expect(joinWords(undefined)).toBe("");
   });
 
-  it('should return a string with words joined by a space if the input is a string with multiple words', () => {
-    expect(joinWords('HelloWorld')).toBe('Hello World');
+  it("should return a string with words joined by a space if the input is a string with multiple words", () => {
+    expect(joinWords("HelloWorld")).toBe("Hello World");
   });
 
-  it('should return the same string if the input is a string with one word', () => {
-    expect(joinWords('Hello')).toBe('Hello');
+  it("should return the same string if the input is a string with one word", () => {
+    expect(joinWords("Hello")).toBe("Hello");
   });
 
-  it('should return the same string if the passed word is all uppercase', () => {
-    expect(joinWords('HELLO')).toBe('HELLO');
+  it("should return the same string if the passed word is all uppercase", () => {
+    expect(joinWords("HELLO")).toBe("HELLO");
   });
 });
diff --git a/utils/parse-json.test.ts b/utils/parse-json.test.ts
index 1551b88..0d0d11b 100644
--- a/utils/parse-json.test.ts
+++ b/utils/parse-json.test.ts
@@ -1,13 +1,13 @@
-import { parseJson } from './parse-json';
+import { parseJson } from "./parse-json";
 
-describe('parseJson', () => {
-  it('should return an object when a valid JSON string is passed', () => {
+describe("parseJson", () => {
+  it("should return an object when a valid JSON string is passed", () => {
     const jsonString = '{"key":"value"}';
-    expect(parseJson(jsonString)).toEqual({ key: 'value' });
+    expect(parseJson(jsonString)).toEqual({ key: "value" });
   });
 
-  it('should return undefined when an invalid JSON string is passed', () => {
-    const invalidJsonString = '{key:value}';
+  it("should return undefined when an invalid JSON string is passed", () => {
+    const invalidJsonString = "{key:value}";
     expect(parseJson(invalidJsonString)).toBeUndefined();
   });
 
@@ -15,11 +15,11 @@ describe('parseJson', () => {
     expect(parseJson("undefined")).toBeUndefined();
   });
 
-  it('should return undefined when null is passed', () => {
+  it("should return undefined when null is passed", () => {
     expect(parseJson(null)).toBeUndefined();
   });
 
-  it('should return undefined when an empty string is passed', () => {
+  it("should return undefined when an empty string is passed", () => {
     expect(parseJson("")).toBeUndefined();
   });
-});
\ No newline at end of file
+});
diff --git a/utils/sleep.test.ts b/utils/sleep.test.ts
index b64fcce..944e4ff 100644
--- a/utils/sleep.test.ts
+++ b/utils/sleep.test.ts
@@ -1,11 +1,11 @@
-import { sleep } from './sleep';
+import { sleep } from "./sleep";
 
-describe('sleep function', () => {
-  it('should return a Promise', () => {
+describe("sleep function", () => {
+  it("should return a Promise", () => {
     expect(sleep(10)).toBeInstanceOf(Promise);
   });
 
-  it('should resolve after specified time', async () => {
+  it("should resolve after specified time", async () => {
     const time = 10;
     const promise = sleep(time);
 
@@ -14,4 +14,4 @@ describe('sleep function', () => {
 
     await expect(promise).resolves.toBeUndefined();
   });
-});
\ No newline at end of file
+});
diff --git a/utils/truncate.test.ts b/utils/truncate.test.ts
index 0ecf15b..c37e17b 100644
--- a/utils/truncate.test.ts
+++ b/utils/truncate.test.ts
@@ -1,50 +1,50 @@
-import { truncate} from './truncate';
+import { truncate } from "./truncate";
 
-describe('truncate', () => {
-  it('should truncate longer textes with a fixed length of characters in the last chunk', () => {
-    const text = '1234567890abcdefghijklmnopqrstuvwxyz';
+describe("truncate", () => {
+  it("should truncate longer textes with a fixed length of characters in the last chunk", () => {
+    const text = "1234567890abcdefghijklmnopqrstuvwxyz";
     const chars = 14;
     const result = truncate(text, chars);
-    expect(result).toBe('1234567890…wxyz');
+    expect(result).toBe("1234567890…wxyz");
   });
 
-  it('should truncate the text when the chars parameter is less than the length of the text', () => {
-    const text = '1234567890';
+  it("should truncate the text when the chars parameter is less than the length of the text", () => {
+    const text = "1234567890";
     const chars = 5;
     const result = truncate(text, chars);
-    expect(result).toBe('123…90');
+    expect(result).toBe("123…90");
   });
 
-  it('should return the full text when the chars parameter is equal to the length of the text', () => {
-    const text = '1234567890';
+  it("should return the full text when the chars parameter is equal to the length of the text", () => {
+    const text = "1234567890";
     const chars = 10;
     const result = truncate(text, chars);
     expect(result).toBe(text);
   });
 
-  it('should return the full text when the chars parameter is greater than the length of the text', () => {
-    const text = '1234567890';
+  it("should return the full text when the chars parameter is greater than the length of the text", () => {
+    const text = "1234567890";
     const chars = 11;
     const result = truncate(text, chars);
     expect(result).toBe(text);
   });
 
-  it('should handle an text with an odd number of characters', () => {
-    const text = '123456789';
+  it("should handle an text with an odd number of characters", () => {
+    const text = "123456789";
     const chars = 5;
     const result = truncate(text, chars);
-    expect(result).toBe('123…89');
+    expect(result).toBe("123…89");
   });
 
-  it('should handle an text with only one character', () => {
-    const text = '1';
+  it("should handle an text with only one character", () => {
+    const text = "1";
     const chars = 1;
     const result = truncate(text, chars);
     expect(result).toBe(text);
   });
 
-  it('should handle an empty text', () => {
-    const text = '';
+  it("should handle an empty text", () => {
+    const text = "";
     const chars = 1;
     const result = truncate(text, chars);
     expect(result).toBe(text);
diff --git a/vitest.config.ts b/vitest.config.ts
index 60966fb..239795c 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -9,7 +9,7 @@ export default defineConfig({
     environment: "happy-dom",
     globals: true,
     restoreMocks: true,
-    setupFiles: "./setupTests.ts",
+    setupFiles: "./setup-tests.ts",
     coverage: {
       reporter: ["json-summary", "text"],
     },