From a1014e31b5f181b27e28f5e2a7c0da390929ee2c Mon Sep 17 00:00:00 2001
From: luisarevalo21 <arevaloluis89@yahoo.com>
Date: Thu, 8 May 2025 21:50:41 -0700
Subject: [PATCH 01/16] fix: eslint for gift details view header return
 statement and return for handleAmazonLink

---
 .eslintignore                                 |  8 +++-----
 .../GiftDetailsView/GiftDetailsView.tsx       | 19 +++++++++++++++++--
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 89b615bf..99e3d9da 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,9 +1,8 @@
 # Ignored files due to ESLINT errors
 
-**/*.test.ts
-**/*.test.tsx
-**/*.test.js
-**/*.test.jsx
+**/\*.test.ts
+**/_.test.tsx
+\*\*/_.test.js \*_/_.test.jsx
 app/api/gift-exchanges/route.ts
 app/api/gift-exchanges/\[id\]/draw/route.ts
 app/api/gift-exchanges/\[id\]/giftSuggestions/route.ts
@@ -36,7 +35,6 @@ components/Avatar/Avatar.tsx
 components/Avatar/AvatarBody.tsx
 components/Button/button.tsx
 components/Calendar/calendar.tsx
-components/GiftDetailsView/GiftDetailsView.tsx
 components/GiftExchangeHeader/GiftExchangeHeader.tsx
 components/GiftSuggestionCard/GiftSuggestionCard.tsx
 components/GlobalGiftSpinner/GlobalGiftSpinner.tsx
diff --git a/components/GiftDetailsView/GiftDetailsView.tsx b/components/GiftDetailsView/GiftDetailsView.tsx
index 5a76108c..71b47c57 100644
--- a/components/GiftDetailsView/GiftDetailsView.tsx
+++ b/components/GiftDetailsView/GiftDetailsView.tsx
@@ -1,3 +1,6 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
 import { Button } from '../Button/button';
 import {
   CardContent,
@@ -9,21 +12,33 @@ import {
 import { SquareArrowOutUpRight, ThumbsDown, Gift } from 'lucide-react';
 import { GiftSuggestion } from '@/app/types/giftSuggestion';
 import { useState, useCallback } from 'react';
+import { JSX } from 'react';
 
+/**
+ * A GiftDetailsView compoennt
+ * @param {GiftSuggestion} gift - Gift suggestion being passed
+ * @param {Function} handleFeedback - callback function when feedback is provided
+ * @returns {JSX.Element} - The rendered GiftDetailsView element.
+ */
 const GiftDetailsView = ({
   gift,
   handleFeedback,
 }: {
   gift: GiftSuggestion;
   handleFeedback: () => void;
-}) => {
+}): JSX.Element => {
   const [imageError, setImageError] = useState(false);
 
   const handleImageError = useCallback(() => {
     setImageError(true);
   }, []);
 
-  const handleAmazonLink = ({ searchTerm }: { searchTerm: string }) => {
+  /**
+   * Search Term details
+   * @param {string} searchTerm - search term being passed in to search amazon list
+   * @returns {string} - returns an encoded search string with the search term
+   */
+  const handleAmazonLink = ({ searchTerm }: { searchTerm: string }): string => {
     const encodedSearch = encodeURIComponent(searchTerm).replace(/%20/g, '+');
     return `https://www.amazon.com/s?k=${encodedSearch}`;
   };

From 595c533695f21f86c907d06fabb5abe8a1e43b40 Mon Sep 17 00:00:00 2001
From: luisarevalo21 <arevaloluis89@yahoo.com>
Date: Thu, 8 May 2025 22:01:35 -0700
Subject: [PATCH 02/16] fix: using index for key, switch to reason

---
 components/GiftDetailsView/GiftDetailsView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/GiftDetailsView/GiftDetailsView.tsx b/components/GiftDetailsView/GiftDetailsView.tsx
index 71b47c57..1cb23ddd 100644
--- a/components/GiftDetailsView/GiftDetailsView.tsx
+++ b/components/GiftDetailsView/GiftDetailsView.tsx
@@ -79,8 +79,8 @@ const GiftDetailsView = ({
       </CardHeader>
       <CardContent className="p-0 m-2 w-72 h-20 flex items-center bg-GiftSuggestionLightGreenBackground rounded-md">
         <ul className="text-xs list-disc list-inside w-full text-giftSuggestionDarkGreen ml-2 flex flex-col gap-1">
-          {gift.matchReasons.map((reason, index) => (
-            <li key={index}>{reason}</li>
+          {gift.matchReasons.map((reason) => (
+            <li key={reason}>{reason}</li>
           ))}
         </ul>
       </CardContent>

From bf7d152caa3c65f804b047c9adffdce95207abc4 Mon Sep 17 00:00:00 2001
From: luisarevalo21 <arevaloluis89@yahoo.com>
Date: Thu, 8 May 2025 22:24:28 -0700
Subject: [PATCH 03/16] fix: adjust the handleFeedback in the JSDOCs so its
 using props

---
 components/GiftDetailsView/GiftDetailsView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/GiftDetailsView/GiftDetailsView.tsx b/components/GiftDetailsView/GiftDetailsView.tsx
index 1cb23ddd..3cd49eb5 100644
--- a/components/GiftDetailsView/GiftDetailsView.tsx
+++ b/components/GiftDetailsView/GiftDetailsView.tsx
@@ -17,8 +17,8 @@ import { JSX } from 'react';
 /**
  * A GiftDetailsView compoennt
  * @param {GiftSuggestion} gift - Gift suggestion being passed
- * @param {Function} handleFeedback - callback function when feedback is provided
- * @returns {JSX.Element} - The rendered GiftDetailsView element.
+ * @param {() => void} props.handleFeedback - Callback function triggered when feedback is provided
+ * @returns {JSX.Element} - the rendered GiftDetailsView
  */
 const GiftDetailsView = ({
   gift,

From bd75e4f81f3df7a5e605a64ad385b53b5c0857e5 Mon Sep 17 00:00:00 2001
From: luisarevalo21 <arevaloluis89@yahoo.com>
Date: Fri, 9 May 2025 20:34:50 -0700
Subject: [PATCH 04/16] fix removed props from handleFeedback

---
 components/GiftDetailsView/GiftDetailsView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/GiftDetailsView/GiftDetailsView.tsx b/components/GiftDetailsView/GiftDetailsView.tsx
index 3cd49eb5..00c3744c 100644
--- a/components/GiftDetailsView/GiftDetailsView.tsx
+++ b/components/GiftDetailsView/GiftDetailsView.tsx
@@ -17,7 +17,7 @@ import { JSX } from 'react';
 /**
  * A GiftDetailsView compoennt
  * @param {GiftSuggestion} gift - Gift suggestion being passed
- * @param {() => void} props.handleFeedback - Callback function triggered when feedback is provided
+ * @param {() => void} handleFeedback - Callback function triggered when feedback is provided
  * @returns {JSX.Element} - the rendered GiftDetailsView
  */
 const GiftDetailsView = ({

From 6dde88d541333622bd351e2a2d70ec2a767a9291 Mon Sep 17 00:00:00 2001
From: luisarevalo21 <arevaloluis89@yahoo.com>
Date: Mon, 12 May 2025 11:28:05 -0700
Subject: [PATCH 05/16] fix: added jsx to the react import

---
 components/GiftDetailsView/GiftDetailsView.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/GiftDetailsView/GiftDetailsView.tsx b/components/GiftDetailsView/GiftDetailsView.tsx
index 00c3744c..b3bd21d2 100644
--- a/components/GiftDetailsView/GiftDetailsView.tsx
+++ b/components/GiftDetailsView/GiftDetailsView.tsx
@@ -11,8 +11,7 @@ import {
 } from '../Card/card';
 import { SquareArrowOutUpRight, ThumbsDown, Gift } from 'lucide-react';
 import { GiftSuggestion } from '@/app/types/giftSuggestion';
-import { useState, useCallback } from 'react';
-import { JSX } from 'react';
+import { useState, useCallback, JSX } from 'react';
 
 /**
  * A GiftDetailsView compoennt

From 12d9ca8cc0c33c5c18b251f7870f159bfe3c96d2 Mon Sep 17 00:00:00 2001
From: luisarevalo21 <arevaloluis89@yahoo.com>
Date: Mon, 12 May 2025 11:47:01 -0700
Subject: [PATCH 06/16] fix: added type file for GiftDetails and passed it into
 the component

---
 components/GiftDetailsView/GiftDetailsView.tsx | 18 ++++++------------
 .../GiftDetailsView/IGiftDetailsViewProps.ts   |  9 +++++++++
 2 files changed, 15 insertions(+), 12 deletions(-)
 create mode 100644 components/GiftDetailsView/IGiftDetailsViewProps.ts

diff --git a/components/GiftDetailsView/GiftDetailsView.tsx b/components/GiftDetailsView/GiftDetailsView.tsx
index b3bd21d2..967eedb2 100644
--- a/components/GiftDetailsView/GiftDetailsView.tsx
+++ b/components/GiftDetailsView/GiftDetailsView.tsx
@@ -12,32 +12,26 @@ import {
 import { SquareArrowOutUpRight, ThumbsDown, Gift } from 'lucide-react';
 import { GiftSuggestion } from '@/app/types/giftSuggestion';
 import { useState, useCallback, JSX } from 'react';
+import { IGiftDetailsViewProps } from './IGiftDetailsViewProps';
 
 /**
  * A GiftDetailsView compoennt
- * @param {GiftSuggestion} gift - Gift suggestion being passed
- * @param {() => void} handleFeedback - Callback function triggered when feedback is provided
+ * @param {object} props - The component props
+ * @param {GiftSuggestion} props.gift - Gift suggestion being passed
+ * @param {() => void} props.handleFeedback - Callback function triggered when feedback is provided
  * @returns {JSX.Element} - the rendered GiftDetailsView
  */
 const GiftDetailsView = ({
   gift,
   handleFeedback,
-}: {
-  gift: GiftSuggestion;
-  handleFeedback: () => void;
-}): JSX.Element => {
+}: IGiftDetailsViewProps): JSX.Element => {
   const [imageError, setImageError] = useState(false);
 
   const handleImageError = useCallback(() => {
     setImageError(true);
   }, []);
 
-  /**
-   * Search Term details
-   * @param {string} searchTerm - search term being passed in to search amazon list
-   * @returns {string} - returns an encoded search string with the search term
-   */
-  const handleAmazonLink = ({ searchTerm }: { searchTerm: string }): string => {
+  const handleAmazonLink = (searchTerm) => {
     const encodedSearch = encodeURIComponent(searchTerm).replace(/%20/g, '+');
     return `https://www.amazon.com/s?k=${encodedSearch}`;
   };
diff --git a/components/GiftDetailsView/IGiftDetailsViewProps.ts b/components/GiftDetailsView/IGiftDetailsViewProps.ts
new file mode 100644
index 00000000..db768676
--- /dev/null
+++ b/components/GiftDetailsView/IGiftDetailsViewProps.ts
@@ -0,0 +1,9 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import { GiftSuggestion } from '@/app/types/giftSuggestion';
+
+export interface IGiftDetailsViewProps {
+  gift: GiftSuggestion;
+  handleFeedback: () => void;
+}

From 5ea8eba58f6021be706d0d440b5ccde9502034ae Mon Sep 17 00:00:00 2001
From: luisarevalo21 <arevaloluis89@yahoo.com>
Date: Mon, 12 May 2025 11:53:05 -0700
Subject: [PATCH 07/16] merged develop

---
 app/onboarding/page.tsx                      |   2 +-
 components/Button/button.tsx                 |  14 ++
 components/NavLogo/NavLogo.test.tsx          |  20 +++
 components/NavLogo/NavLogo.tsx               |  16 +-
 components/Select/Select.test.tsx            |  65 ++++++++
 components/Select/Select.tsx                 |  14 ++
 components/Select/SelectContent.test.tsx     |  65 ++++++++
 components/Select/SelectContent.tsx          |  43 +++++
 components/Select/SelectItem.test.tsx        |  75 +++++++++
 components/Select/SelectItem.tsx             |  31 ++++
 components/Select/SelectLabel.test.tsx       |  43 +++++
 components/Select/SelectLabel.tsx            |  21 +++
 components/Select/SelectScrollDownButton.tsx |  28 ++++
 components/Select/SelectScrollUpButton.tsx   |  27 ++++
 components/Select/SelectSeparator.test.tsx   |  36 +++++
 components/Select/SelectSeparator.tsx        |  21 +++
 components/Select/SelectTrigger.test.tsx     |  72 +++++++++
 components/Select/SelectTrigger.tsx          |  30 ++++
 components/Select/index.ts                   |  11 ++
 components/Select/select.tsx                 | 159 -------------------
 package.json                                 |  13 +-
 pnpm-lock.yaml                               |  13 ++
 22 files changed, 650 insertions(+), 169 deletions(-)
 create mode 100644 components/NavLogo/NavLogo.test.tsx
 create mode 100644 components/Select/Select.test.tsx
 create mode 100644 components/Select/Select.tsx
 create mode 100644 components/Select/SelectContent.test.tsx
 create mode 100644 components/Select/SelectContent.tsx
 create mode 100644 components/Select/SelectItem.test.tsx
 create mode 100644 components/Select/SelectItem.tsx
 create mode 100644 components/Select/SelectLabel.test.tsx
 create mode 100644 components/Select/SelectLabel.tsx
 create mode 100644 components/Select/SelectScrollDownButton.tsx
 create mode 100644 components/Select/SelectScrollUpButton.tsx
 create mode 100644 components/Select/SelectSeparator.test.tsx
 create mode 100644 components/Select/SelectSeparator.tsx
 create mode 100644 components/Select/SelectTrigger.test.tsx
 create mode 100644 components/Select/SelectTrigger.tsx
 create mode 100644 components/Select/index.ts
 delete mode 100644 components/Select/select.tsx

diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
index b982b68b..4f68172f 100644
--- a/app/onboarding/page.tsx
+++ b/app/onboarding/page.tsx
@@ -31,7 +31,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/Select/select';
+} from '@/components/Select';
 import { MultiSelect } from '@/components/MultiSelect/multi-select-input';
 import { Textarea } from '@/components/TextArea/textarea';
 import { Slider } from '@/components/Slider/slider';
diff --git a/components/Button/button.tsx b/components/Button/button.tsx
index 1de715b5..cc76d48b 100644
--- a/components/Button/button.tsx
+++ b/components/Button/button.tsx
@@ -1,9 +1,13 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '@/lib/utils';
 
+
 const buttonVariants = cva(
   'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
@@ -39,6 +43,15 @@ export interface ButtonProps
   asChild?: boolean;
 }
 
+/**
+ * A customizable Button Component.
+ * @param {object} props - Props for the button.
+ * @param {string} props.className - Additional CSS classes
+ * @param {string} [props.variant="default"] - CSS styling of button such as color, border, drop shadow ("defauly", "destructive", "outline", "secondary", "ghost", "link")
+ * @param {string} [props.size="default"] - Size of button ("default", "sm", "m", "lg", "icon")
+ * @param {boolean} [props.asChild="false"] - Renders as child component if true
+ * @returns {Button} - returns Button component.
+ */
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : 'button';
@@ -54,3 +67,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 Button.displayName = 'Button';
 
 export { Button, buttonVariants };
+
diff --git a/components/NavLogo/NavLogo.test.tsx b/components/NavLogo/NavLogo.test.tsx
new file mode 100644
index 00000000..09afca43
--- /dev/null
+++ b/components/NavLogo/NavLogo.test.tsx
@@ -0,0 +1,20 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import NavLogo from './NavLogo';
+import { render, screen } from '@testing-library/react';
+
+describe('NavLogo', () => {
+    it('renders the logo and links to the dashboard', () => {
+        render(<NavLogo/>);
+
+        const navLogoIcon = screen.getByTestId('nav-logo-icon');
+        expect(navLogoIcon).toBeInTheDocument();
+        
+        const navLogoText = screen.getByTestId('nav-logo-text');
+        expect(navLogoText).toHaveTextContent('Elfgorithm');
+
+        const navLogoLink = screen.getByTestId('nav-logo-link');
+        expect(navLogoLink).toHaveAttribute('href', '/dashboard')
+    });
+})
\ No newline at end of file
diff --git a/components/NavLogo/NavLogo.tsx b/components/NavLogo/NavLogo.tsx
index 8cc5b9a9..47bdcc93 100644
--- a/components/NavLogo/NavLogo.tsx
+++ b/components/NavLogo/NavLogo.tsx
@@ -11,9 +11,19 @@ import { JSX } from 'react';
  */
 const NavLogo = (): JSX.Element => {
   return (
-    <Link href={'/dashboard'} className="flex items-center">
-      <Gift className="bg-logoWhite h-8 w-8 p-1 rounded-lg text-red-600" />
-      <p className="font-bold ml-2 italic text-green-200">
+    <Link 
+      href={'/dashboard'} 
+      className="flex items-center"
+      data-testid="nav-logo-link"
+    >
+      <Gift 
+        className="bg-logoWhite h-8 w-8 p-1 rounded-lg text-red-600" 
+        data-testid="nav-logo-icon"
+      />
+      <p 
+        className="font-bold ml-2 italic text-green-200"
+        data-testid="nav-logo-text"
+      >
         Elf<span className="text-white font-semibold">gorithm</span>
       </p>
     </Link>
diff --git a/components/Select/Select.test.tsx b/components/Select/Select.test.tsx
new file mode 100644
index 00000000..b120f8ad
--- /dev/null
+++ b/components/Select/Select.test.tsx
@@ -0,0 +1,65 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+} from '@/components/Select';
+
+describe('Select', () => {
+  it("renders provided children", () => {
+    render(
+      <Select defaultValue="default-select-value">
+        <SelectGroup>
+          <SelectValue>hello</SelectValue>
+        </SelectGroup>
+      </Select>,
+    );
+    expect(screen.getByText('hello')).toBeInTheDocument();
+  });
+});
+
+describe('Select - keyboard accessibility', () => {
+  let user: ReturnType<typeof userEvent.setup>;
+  let trigger: HTMLElement;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+    render(
+      <Select defaultValue="apple">
+        <SelectTrigger>
+          <SelectValue placeholder="Pick a fruit..." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Fruits</SelectLabel>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>,
+    );
+    trigger = screen.getByTestId('select-trigger');
+    trigger.focus();
+  });
+
+  it('opens the dropdown menu with the Enter key', async () => {
+    await user.keyboard('{Enter}');
+    expect(screen.getByTestId('select-content')).toBeVisible();
+  });
+
+  it('navigates with ArrowDown, selects Banana with Enter, and closes the dropdown', async () => {
+    await user.keyboard('{Enter}{ArrowDown}{ArrowDown}{Enter}');
+    expect(screen.queryByTestId('select-content')).toBeNull();
+    expect(trigger).toHaveTextContent('Banana');
+  });
+});
diff --git a/components/Select/Select.tsx b/components/Select/Select.tsx
new file mode 100644
index 00000000..9710d722
--- /dev/null
+++ b/components/Select/Select.tsx
@@ -0,0 +1,14 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+'use client';
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+export { Select, SelectGroup, SelectValue };
diff --git a/components/Select/SelectContent.test.tsx b/components/Select/SelectContent.test.tsx
new file mode 100644
index 00000000..fa4050dc
--- /dev/null
+++ b/components/Select/SelectContent.test.tsx
@@ -0,0 +1,65 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import { render, screen, within, fireEvent } from '@testing-library/react';
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectGroup,
+} from '@/components/Select';
+
+describe('Select Content', () => {
+  beforeEach(() => {
+    render(
+      <Select defaultValue="cookie">
+        <SelectTrigger>
+          <SelectValue placeholder="Pick a dessert" />
+        </SelectTrigger>
+        <SelectContent className="my-content">
+          <span>This is the dessert content</span>
+          <SelectGroup>
+            <SelectLabel>Desserts</SelectLabel>
+            <SelectItem value="cookie">Cookie</SelectItem>
+            <SelectItem value="cake">Cake</SelectItem>
+            <SelectItem value="brownie" disabled>
+              Brownie
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>,
+    );
+  });
+
+  it('opens the select content dropdown when the trigger is clicked', () => {
+    expect(screen.queryByTestId('select-content')).toBeNull();
+    fireEvent.click(screen.getByTestId('select-trigger'));
+    expect(screen.getByTestId('select-content')).toBeInTheDocument();
+  });
+
+  it('selects an option and closes the dropdown', () => {
+    const selectTrigger = screen.getByTestId('select-trigger');
+    fireEvent.click(selectTrigger);
+    fireEvent.click(screen.getByRole('option', { name: 'Cake' }));
+    expect(screen.queryByTestId('select-content')).toBeNull();
+  });
+
+  it("doesn't select or close the dropdown when a disabled item is clicked", () => {
+    fireEvent.click(screen.getByTestId('select-trigger'));
+    const disabledItem = screen.getByRole('option', { name: 'Brownie' });
+    fireEvent.click(disabledItem);
+    expect(screen.getByTestId('select-content')).toBeInTheDocument();
+    expect(screen.getByTestId('select-trigger')).toHaveTextContent('Cookie');
+  });
+
+  it('renders children and forwards props', () => {
+    fireEvent.click(screen.getByTestId('select-trigger'));
+    const selectContent = screen.getByTestId('select-content');
+    expect(selectContent).toHaveClass('my-content');
+    const triggerSpan = within(selectContent).getByText('This is the dessert content');
+    expect(triggerSpan).toBeInTheDocument();
+  });
+});
diff --git a/components/Select/SelectContent.tsx b/components/Select/SelectContent.tsx
new file mode 100644
index 00000000..cfd1f32f
--- /dev/null
+++ b/components/Select/SelectContent.tsx
@@ -0,0 +1,43 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+'use client';
+
+import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { cn } from '@/lib/utils';
+import { SelectScrollDownButton } from './SelectScrollDownButton';
+import { SelectScrollUpButton } from './SelectScrollUpButton';
+
+export const SelectContent = forwardRef<
+  ElementRef<typeof SelectPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      data-testid="select-content"
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
diff --git a/components/Select/SelectItem.test.tsx b/components/Select/SelectItem.test.tsx
new file mode 100644
index 00000000..9525fec2
--- /dev/null
+++ b/components/Select/SelectItem.test.tsx
@@ -0,0 +1,75 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import { render, screen, within, fireEvent } from '@testing-library/react';
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectGroup,
+} from '@/components/Select';
+
+describe('Select Item', () => {
+  beforeEach(() => {
+    render(
+      <Select defaultValue="basketball">
+        <SelectTrigger>
+          <SelectValue placeholder="Pick a sport" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Sports</SelectLabel>
+            <SelectItem value="basketball" className="my-item">
+              Basketball
+            </SelectItem>
+            <SelectItem value="football">Football</SelectItem>
+            <SelectItem value="soccer" disabled>
+              Soccer
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>,
+    );
+  });
+
+  it('opens the select content dropdown and its items when the trigger is clicked', () => {
+    fireEvent.click(screen.getByTestId('select-trigger'));
+    expect(
+      screen.getByRole('option', { name: 'Football' }),
+    ).toBeInTheDocument();
+  });
+
+  it('selects an item and renders its data state as checked', () => {
+    const selectTrigger = screen.getByTestId('select-trigger');
+    fireEvent.click(selectTrigger);
+    fireEvent.click(screen.getByRole('option', { name: 'Football' }));
+    expect(selectTrigger).toHaveTextContent('Football');
+
+    fireEvent.click(selectTrigger);
+    expect(screen.getByRole('option', { name: 'Football' })).toHaveAttribute(
+      'data-state',
+      'checked',
+    );
+  });
+
+  it("doesn't select a disabled item", () => {
+    fireEvent.click(screen.getByTestId('select-trigger'));
+    const disabledItem = screen.getByRole('option', { name: 'Soccer' });
+    fireEvent.click(disabledItem);
+    expect(screen.getByTestId('select-content')).toBeInTheDocument();
+    expect(screen.getByTestId('select-trigger')).toHaveTextContent(
+      'Basketball',
+    );
+  });
+
+  it('forwards props', () => {
+    fireEvent.click(screen.getByTestId('select-trigger'));
+    const selectItem = screen.getByRole('option', {
+      name: 'Basketball',
+    });
+    expect(selectItem).toHaveClass('my-item');
+  });
+});
diff --git a/components/Select/SelectItem.tsx b/components/Select/SelectItem.tsx
new file mode 100644
index 00000000..3bbc7043
--- /dev/null
+++ b/components/Select/SelectItem.tsx
@@ -0,0 +1,31 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+'use client';
+
+import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export const SelectItem = forwardRef<
+  ElementRef<typeof SelectPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
diff --git a/components/Select/SelectLabel.test.tsx b/components/Select/SelectLabel.test.tsx
new file mode 100644
index 00000000..25be79ec
--- /dev/null
+++ b/components/Select/SelectLabel.test.tsx
@@ -0,0 +1,43 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import { render, screen, within, fireEvent } from '@testing-library/react';
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectGroup,
+} from '@/components/Select';
+
+describe('Select Label', () => {
+  beforeEach(() => {
+    render(
+      <Select>
+        <SelectTrigger />
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel className="my-label">
+              hello
+              <span>world</span>
+            </SelectLabel>
+          </SelectGroup>
+        </SelectContent>
+      </Select>,
+    );
+  });
+
+  it('renders provided label text', () => {
+    fireEvent.click(screen.getByTestId('select-trigger'));
+    expect(screen.getByTestId('select-label')).toBeInTheDocument();
+    expect(screen.getByText('hello')).toBeInTheDocument();
+  });
+
+  it('Forwards props and renders children', () => {
+    fireEvent.click(screen.getByTestId('select-trigger'));
+    const selectLabel = screen.getByTestId('select-label');
+    expect(selectLabel).toHaveClass('my-label');
+    const labelSpan = within(selectLabel).getByText('world');
+    expect(labelSpan).toBeInTheDocument();
+  });
+});
diff --git a/components/Select/SelectLabel.tsx b/components/Select/SelectLabel.tsx
new file mode 100644
index 00000000..88da1706
--- /dev/null
+++ b/components/Select/SelectLabel.tsx
@@ -0,0 +1,21 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+'use client';
+
+import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { cn } from '@/lib/utils';
+
+export const SelectLabel = forwardRef<
+  ElementRef<typeof SelectPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    data-testid="select-label"
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
diff --git a/components/Select/SelectScrollDownButton.tsx b/components/Select/SelectScrollDownButton.tsx
new file mode 100644
index 00000000..95ec0b62
--- /dev/null
+++ b/components/Select/SelectScrollDownButton.tsx
@@ -0,0 +1,28 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+'use client';
+
+import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export const SelectScrollDownButton = forwardRef<
+  ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    data-testid="select-scroll-down-button"
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
diff --git a/components/Select/SelectScrollUpButton.tsx b/components/Select/SelectScrollUpButton.tsx
new file mode 100644
index 00000000..89cc3f51
--- /dev/null
+++ b/components/Select/SelectScrollUpButton.tsx
@@ -0,0 +1,27 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+'use client';
+
+import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { ChevronUp } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export const SelectScrollUpButton = forwardRef<
+  ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    data-testid="select-scroll-up-button"
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
diff --git a/components/Select/SelectSeparator.test.tsx b/components/Select/SelectSeparator.test.tsx
new file mode 100644
index 00000000..26e52757
--- /dev/null
+++ b/components/Select/SelectSeparator.test.tsx
@@ -0,0 +1,36 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import { render, screen, fireEvent } from '@testing-library/react';
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectSeparator,
+  SelectItem,
+} from '@/components/Select';
+
+describe('SelectSeparator', () => {
+  it('renders and forwards props', () => {
+    render(
+      <Select defaultValue="1">
+        <SelectTrigger>
+          <SelectValue placeholder="Choose…" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="1">One</SelectItem>
+          <SelectSeparator aria-label="foo" className="my-separator" />
+          <SelectItem value="2">Two</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+
+    fireEvent.click(screen.getByTestId('select-trigger'));
+
+    const sep = screen.getByTestId('select-separator');
+    expect(sep).toBeInTheDocument();
+    expect(sep).toHaveAttribute('aria-label', 'foo');
+    expect(sep).toHaveClass('my-separator');
+  });
+});
diff --git a/components/Select/SelectSeparator.tsx b/components/Select/SelectSeparator.tsx
new file mode 100644
index 00000000..be6c2403
--- /dev/null
+++ b/components/Select/SelectSeparator.tsx
@@ -0,0 +1,21 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+'use client';
+
+import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { cn } from '@/lib/utils';
+
+export const SelectSeparator = forwardRef<
+  ElementRef<typeof SelectPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    data-testid="select-separator"
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
diff --git a/components/Select/SelectTrigger.test.tsx b/components/Select/SelectTrigger.test.tsx
new file mode 100644
index 00000000..773c9fd6
--- /dev/null
+++ b/components/Select/SelectTrigger.test.tsx
@@ -0,0 +1,72 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import { render, screen, within, fireEvent } from '@testing-library/react';
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectGroup,
+} from '@/components/Select';
+
+describe('Select Trigger', () => {
+  beforeEach(() => {
+    render(
+      <Select defaultValue="apple">
+        <SelectTrigger aria-label="foo" className="my-trigger">
+          <span>Choose a fruit:</span>
+          <SelectValue placeholder="Pick a fruit..." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Fruits</SelectLabel>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+            <SelectItem value="orange" disabled>
+              Orange
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>,
+    );
+  });
+
+  it('opens the dropdown when the trigger is clicked', () => {
+    expect(screen.queryByTestId('select-content')).toBeNull();
+    fireEvent.click(screen.getByTestId('select-trigger'));
+    expect(screen.getByTestId('select-content')).toBeInTheDocument();
+  });
+
+  it('selects an option, closes the dropdown, updates the trigger text, and marks the item as checked', () => {
+    const selectTrigger = screen.getByTestId('select-trigger');
+    fireEvent.click(selectTrigger);
+    fireEvent.click(screen.getByRole('option', { name: 'Banana' }));
+    expect(screen.queryByTestId('select-content')).toBeNull();
+    expect(selectTrigger).toHaveTextContent('Banana');
+
+    fireEvent.click(selectTrigger);
+    expect(screen.getByRole('option', { name: 'Banana' })).toHaveAttribute(
+      'data-state',
+      'checked',
+    );
+  });
+
+  it("doesn't select or close when a disabled item is clicked", () => {
+    fireEvent.click(screen.getByTestId('select-trigger'));
+    const disabledItem = screen.getByRole('option', { name: 'Orange' });
+    fireEvent.click(disabledItem);
+    expect(screen.getByTestId('select-content')).toBeInTheDocument();
+    expect(screen.getByTestId('select-trigger')).toHaveTextContent('Apple');
+  });
+
+  it('renders children and forwards props', () => {
+    const selectTrigger = screen.getByTestId('select-trigger');
+    expect(selectTrigger).toHaveAttribute('aria-label', 'foo');
+    expect(selectTrigger).toHaveClass('my-trigger');
+    const triggerSpan = within(selectTrigger).getByText('Choose a fruit:');
+    expect(triggerSpan).toBeInTheDocument();
+  });
+});
diff --git a/components/Select/SelectTrigger.tsx b/components/Select/SelectTrigger.tsx
new file mode 100644
index 00000000..52feedab
--- /dev/null
+++ b/components/Select/SelectTrigger.tsx
@@ -0,0 +1,30 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+'use client';
+
+import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export const SelectTrigger = forwardRef<
+  ElementRef<typeof SelectPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    data-testid="select-trigger"
+    ref={ref}
+    className={cn(
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
diff --git a/components/Select/index.ts b/components/Select/index.ts
new file mode 100644
index 00000000..dedad12c
--- /dev/null
+++ b/components/Select/index.ts
@@ -0,0 +1,11 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+export { Select, SelectGroup, SelectValue } from './Select';
+export { SelectTrigger } from './SelectTrigger';
+export { SelectContent } from './SelectContent';
+export { SelectItem } from './SelectItem';
+export { SelectLabel } from './SelectLabel';
+export { SelectSeparator } from './SelectSeparator';
+export { SelectScrollUpButton } from './SelectScrollUpButton';
+export { SelectScrollDownButton } from './SelectScrollDownButton';
diff --git a/components/Select/select.tsx b/components/Select/select.tsx
deleted file mode 100644
index 38885e53..00000000
--- a/components/Select/select.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { Check, ChevronDown, ChevronUp } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      'flex cursor-default items-center justify-center py-1',
-      className,
-    )}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      'flex cursor-default items-center justify-center py-1',
-      className,
-    )}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        position === 'popper' &&
-          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        className,
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          'p-1',
-          position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-};
diff --git a/package.json b/package.json
index 59556c8d..a98b98d5 100644
--- a/package.json
+++ b/package.json
@@ -49,16 +49,17 @@
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.27.0",
-    "@storybook/test": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/nextjs": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/addon-onboarding": "^8.6.12",
-    "@storybook/addon-essentials": "^8.6.12",
     "@chromatic-com/storybook": "3",
     "@playwright/test": "^1.51.1",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/nextjs": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/test": "^8.6.12",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
     "@types/node": "^20",
     "@types/react": "^18",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 84ab6b15..b2f45f24 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -144,6 +144,9 @@ importers:
       '@testing-library/react':
         specifier: ^16.3.0
         version: 16.3.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.6(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/user-event':
+        specifier: ^14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.0)
       '@types/jest':
         specifier: ^29.5.14
         version: 29.5.14
@@ -2055,6 +2058,12 @@ packages:
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
+  '@testing-library/user-event@14.6.1':
+    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
   '@tootallnate/once@2.0.0':
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}
@@ -8094,6 +8103,10 @@ snapshots:
     dependencies:
       '@testing-library/dom': 10.4.0
 
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.0)':
+    dependencies:
+      '@testing-library/dom': 10.4.0
+
   '@tootallnate/once@2.0.0': {}
 
   '@tsconfig/node10@1.0.11': {}

From fc93f1a78ef7c09629ada89b7b5d33c4d0dfec8d Mon Sep 17 00:00:00 2001
From: luisarevalo21 <arevaloluis89@yahoo.com>
Date: Mon, 12 May 2025 12:13:21 -0700
Subject: [PATCH 08/16] reversed eslintignore

---
 .eslintignore | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 99e3d9da..89b615bf 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,8 +1,9 @@
 # Ignored files due to ESLINT errors
 
-**/\*.test.ts
-**/_.test.tsx
-\*\*/_.test.js \*_/_.test.jsx
+**/*.test.ts
+**/*.test.tsx
+**/*.test.js
+**/*.test.jsx
 app/api/gift-exchanges/route.ts
 app/api/gift-exchanges/\[id\]/draw/route.ts
 app/api/gift-exchanges/\[id\]/giftSuggestions/route.ts
@@ -35,6 +36,7 @@ components/Avatar/Avatar.tsx
 components/Avatar/AvatarBody.tsx
 components/Button/button.tsx
 components/Calendar/calendar.tsx
+components/GiftDetailsView/GiftDetailsView.tsx
 components/GiftExchangeHeader/GiftExchangeHeader.tsx
 components/GiftSuggestionCard/GiftSuggestionCard.tsx
 components/GlobalGiftSpinner/GlobalGiftSpinner.tsx

From 1f57ce0e28e7855637e6d0826c32d017bd54ef84 Mon Sep 17 00:00:00 2001
From: luisarevalo21 <arevaloluis89@yahoo.com>
Date: Mon, 12 May 2025 12:14:18 -0700
Subject: [PATCH 09/16] fix: removed gift details view from eslint file

---
 .eslintignore | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.eslintignore b/.eslintignore
index 89b615bf..c1b84b4a 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -36,7 +36,6 @@ components/Avatar/Avatar.tsx
 components/Avatar/AvatarBody.tsx
 components/Button/button.tsx
 components/Calendar/calendar.tsx
-components/GiftDetailsView/GiftDetailsView.tsx
 components/GiftExchangeHeader/GiftExchangeHeader.tsx
 components/GiftSuggestionCard/GiftSuggestionCard.tsx
 components/GlobalGiftSpinner/GlobalGiftSpinner.tsx

From c4942d10c3a51f3786a72250540643728b24454d Mon Sep 17 00:00:00 2001
From: luisarevalo21 <arevaloluis89@yahoo.com>
Date: Mon, 12 May 2025 18:00:26 -0700
Subject: [PATCH 10/16] revered

---
 .vscode/settings.json                        |   3 +
 :wq                                          |  37 +++++
 app/onboarding/page.tsx                      |   2 +-
 components/Button/button.tsx                 |  14 --
 components/NavLogo/NavLogo.test.tsx          |  20 ---
 components/NavLogo/NavLogo.tsx               |  16 +-
 components/Select/Select.test.tsx            |  65 --------
 components/Select/Select.tsx                 |  14 --
 components/Select/SelectContent.test.tsx     |  65 --------
 components/Select/SelectContent.tsx          |  43 -----
 components/Select/SelectItem.test.tsx        |  75 ---------
 components/Select/SelectItem.tsx             |  31 ----
 components/Select/SelectLabel.test.tsx       |  43 -----
 components/Select/SelectLabel.tsx            |  21 ---
 components/Select/SelectScrollDownButton.tsx |  28 ----
 components/Select/SelectScrollUpButton.tsx   |  27 ----
 components/Select/SelectSeparator.test.tsx   |  36 -----
 components/Select/SelectSeparator.tsx        |  21 ---
 components/Select/SelectTrigger.test.tsx     |  72 ---------
 components/Select/SelectTrigger.tsx          |  30 ----
 components/Select/index.ts                   |  11 --
 components/Select/select.tsx                 | 159 +++++++++++++++++++
 package.json                                 |  13 +-
 pnpm-lock.yaml                               |  13 --
 24 files changed, 209 insertions(+), 650 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 :wq
 delete mode 100644 components/NavLogo/NavLogo.test.tsx
 delete mode 100644 components/Select/Select.test.tsx
 delete mode 100644 components/Select/Select.tsx
 delete mode 100644 components/Select/SelectContent.test.tsx
 delete mode 100644 components/Select/SelectContent.tsx
 delete mode 100644 components/Select/SelectItem.test.tsx
 delete mode 100644 components/Select/SelectItem.tsx
 delete mode 100644 components/Select/SelectLabel.test.tsx
 delete mode 100644 components/Select/SelectLabel.tsx
 delete mode 100644 components/Select/SelectScrollDownButton.tsx
 delete mode 100644 components/Select/SelectScrollUpButton.tsx
 delete mode 100644 components/Select/SelectSeparator.test.tsx
 delete mode 100644 components/Select/SelectSeparator.tsx
 delete mode 100644 components/Select/SelectTrigger.test.tsx
 delete mode 100644 components/Select/SelectTrigger.tsx
 delete mode 100644 components/Select/index.ts
 create mode 100644 components/Select/select.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..6b0e5abf
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "postman.settings.dotenv-detection-notification-visibility": false
+}
\ No newline at end of file
diff --git a/:wq b/:wq
new file mode 100644
index 00000000..bc2ab85b
--- /dev/null
+++ b/:wq
@@ -0,0 +1,37 @@
+Revert "merged develop"
+
+This reverts commit 5ea8eba58f6021be706d0d440b5ccde9502034ae.
+
+# Please enter the commit message for your changes. Lines starting
+# with '#' will be ignored, and an empty message aborts the commit.
+#
+# On branch luisA/258-GiftDetailsView-ESLint
+# Your branch is up to date with 'origin/luisA/258-GiftDetailsView-ESLint'.
+#
+# Changes to be committed:
+#	modified:   app/onboarding/page.tsx
+#	modified:   components/Button/button.tsx
+#	deleted:    components/NavLogo/NavLogo.test.tsx
+#	modified:   components/NavLogo/NavLogo.tsx
+#	deleted:    components/Select/Select.test.tsx
+#	deleted:    components/Select/Select.tsx
+#	deleted:    components/Select/SelectContent.test.tsx
+#	deleted:    components/Select/SelectContent.tsx
+#	deleted:    components/Select/SelectItem.test.tsx
+#	deleted:    components/Select/SelectItem.tsx
+#	deleted:    components/Select/SelectLabel.test.tsx
+#	deleted:    components/Select/SelectLabel.tsx
+#	deleted:    components/Select/SelectScrollDownButton.tsx
+#	deleted:    components/Select/SelectScrollUpButton.tsx
+#	deleted:    components/Select/SelectSeparator.test.tsx
+#	deleted:    components/Select/SelectSeparator.tsx
+#	deleted:    components/Select/SelectTrigger.test.tsx
+#	deleted:    components/Select/SelectTrigger.tsx
+#	deleted:    components/Select/index.ts
+#	new file:   components/Select/select.tsx
+#	modified:   package.json
+#	modified:   pnpm-lock.yaml
+#
+# Untracked files:
+#	.vscode/
+#
diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
index 4f68172f..b982b68b 100644
--- a/app/onboarding/page.tsx
+++ b/app/onboarding/page.tsx
@@ -31,7 +31,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/Select';
+} from '@/components/Select/select';
 import { MultiSelect } from '@/components/MultiSelect/multi-select-input';
 import { Textarea } from '@/components/TextArea/textarea';
 import { Slider } from '@/components/Slider/slider';
diff --git a/components/Button/button.tsx b/components/Button/button.tsx
index cc76d48b..1de715b5 100644
--- a/components/Button/button.tsx
+++ b/components/Button/button.tsx
@@ -1,13 +1,9 @@
-// Copyright (c) Gridiron Survivor.
-// Licensed under the MIT License.
-
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '@/lib/utils';
 
-
 const buttonVariants = cva(
   'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
@@ -43,15 +39,6 @@ export interface ButtonProps
   asChild?: boolean;
 }
 
-/**
- * A customizable Button Component.
- * @param {object} props - Props for the button.
- * @param {string} props.className - Additional CSS classes
- * @param {string} [props.variant="default"] - CSS styling of button such as color, border, drop shadow ("defauly", "destructive", "outline", "secondary", "ghost", "link")
- * @param {string} [props.size="default"] - Size of button ("default", "sm", "m", "lg", "icon")
- * @param {boolean} [props.asChild="false"] - Renders as child component if true
- * @returns {Button} - returns Button component.
- */
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : 'button';
@@ -67,4 +54,3 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 Button.displayName = 'Button';
 
 export { Button, buttonVariants };
-
diff --git a/components/NavLogo/NavLogo.test.tsx b/components/NavLogo/NavLogo.test.tsx
deleted file mode 100644
index 09afca43..00000000
--- a/components/NavLogo/NavLogo.test.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright (c) Gridiron Survivor.
-// Licensed under the MIT License.
-
-import NavLogo from './NavLogo';
-import { render, screen } from '@testing-library/react';
-
-describe('NavLogo', () => {
-    it('renders the logo and links to the dashboard', () => {
-        render(<NavLogo/>);
-
-        const navLogoIcon = screen.getByTestId('nav-logo-icon');
-        expect(navLogoIcon).toBeInTheDocument();
-        
-        const navLogoText = screen.getByTestId('nav-logo-text');
-        expect(navLogoText).toHaveTextContent('Elfgorithm');
-
-        const navLogoLink = screen.getByTestId('nav-logo-link');
-        expect(navLogoLink).toHaveAttribute('href', '/dashboard')
-    });
-})
\ No newline at end of file
diff --git a/components/NavLogo/NavLogo.tsx b/components/NavLogo/NavLogo.tsx
index 47bdcc93..8cc5b9a9 100644
--- a/components/NavLogo/NavLogo.tsx
+++ b/components/NavLogo/NavLogo.tsx
@@ -11,19 +11,9 @@ import { JSX } from 'react';
  */
 const NavLogo = (): JSX.Element => {
   return (
-    <Link 
-      href={'/dashboard'} 
-      className="flex items-center"
-      data-testid="nav-logo-link"
-    >
-      <Gift 
-        className="bg-logoWhite h-8 w-8 p-1 rounded-lg text-red-600" 
-        data-testid="nav-logo-icon"
-      />
-      <p 
-        className="font-bold ml-2 italic text-green-200"
-        data-testid="nav-logo-text"
-      >
+    <Link href={'/dashboard'} className="flex items-center">
+      <Gift className="bg-logoWhite h-8 w-8 p-1 rounded-lg text-red-600" />
+      <p className="font-bold ml-2 italic text-green-200">
         Elf<span className="text-white font-semibold">gorithm</span>
       </p>
     </Link>
diff --git a/components/Select/Select.test.tsx b/components/Select/Select.test.tsx
deleted file mode 100644
index b120f8ad..00000000
--- a/components/Select/Select.test.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-// Copyright (c) Gridiron Survivor.
-// Licensed under the MIT License.
-
-window.HTMLElement.prototype.scrollIntoView = jest.fn();
-
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-} from '@/components/Select';
-
-describe('Select', () => {
-  it("renders provided children", () => {
-    render(
-      <Select defaultValue="default-select-value">
-        <SelectGroup>
-          <SelectValue>hello</SelectValue>
-        </SelectGroup>
-      </Select>,
-    );
-    expect(screen.getByText('hello')).toBeInTheDocument();
-  });
-});
-
-describe('Select - keyboard accessibility', () => {
-  let user: ReturnType<typeof userEvent.setup>;
-  let trigger: HTMLElement;
-
-  beforeEach(() => {
-    user = userEvent.setup();
-    render(
-      <Select defaultValue="apple">
-        <SelectTrigger>
-          <SelectValue placeholder="Pick a fruit..." />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>,
-    );
-    trigger = screen.getByTestId('select-trigger');
-    trigger.focus();
-  });
-
-  it('opens the dropdown menu with the Enter key', async () => {
-    await user.keyboard('{Enter}');
-    expect(screen.getByTestId('select-content')).toBeVisible();
-  });
-
-  it('navigates with ArrowDown, selects Banana with Enter, and closes the dropdown', async () => {
-    await user.keyboard('{Enter}{ArrowDown}{ArrowDown}{Enter}');
-    expect(screen.queryByTestId('select-content')).toBeNull();
-    expect(trigger).toHaveTextContent('Banana');
-  });
-});
diff --git a/components/Select/Select.tsx b/components/Select/Select.tsx
deleted file mode 100644
index 9710d722..00000000
--- a/components/Select/Select.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-// Copyright (c) Gridiron Survivor.
-// Licensed under the MIT License.
-
-'use client';
-
-import * as SelectPrimitive from '@radix-ui/react-select';
-
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-export { Select, SelectGroup, SelectValue };
diff --git a/components/Select/SelectContent.test.tsx b/components/Select/SelectContent.test.tsx
deleted file mode 100644
index fa4050dc..00000000
--- a/components/Select/SelectContent.test.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-// Copyright (c) Gridiron Survivor.
-// Licensed under the MIT License.
-
-import { render, screen, within, fireEvent } from '@testing-library/react';
-import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-  SelectLabel,
-  SelectGroup,
-} from '@/components/Select';
-
-describe('Select Content', () => {
-  beforeEach(() => {
-    render(
-      <Select defaultValue="cookie">
-        <SelectTrigger>
-          <SelectValue placeholder="Pick a dessert" />
-        </SelectTrigger>
-        <SelectContent className="my-content">
-          <span>This is the dessert content</span>
-          <SelectGroup>
-            <SelectLabel>Desserts</SelectLabel>
-            <SelectItem value="cookie">Cookie</SelectItem>
-            <SelectItem value="cake">Cake</SelectItem>
-            <SelectItem value="brownie" disabled>
-              Brownie
-            </SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>,
-    );
-  });
-
-  it('opens the select content dropdown when the trigger is clicked', () => {
-    expect(screen.queryByTestId('select-content')).toBeNull();
-    fireEvent.click(screen.getByTestId('select-trigger'));
-    expect(screen.getByTestId('select-content')).toBeInTheDocument();
-  });
-
-  it('selects an option and closes the dropdown', () => {
-    const selectTrigger = screen.getByTestId('select-trigger');
-    fireEvent.click(selectTrigger);
-    fireEvent.click(screen.getByRole('option', { name: 'Cake' }));
-    expect(screen.queryByTestId('select-content')).toBeNull();
-  });
-
-  it("doesn't select or close the dropdown when a disabled item is clicked", () => {
-    fireEvent.click(screen.getByTestId('select-trigger'));
-    const disabledItem = screen.getByRole('option', { name: 'Brownie' });
-    fireEvent.click(disabledItem);
-    expect(screen.getByTestId('select-content')).toBeInTheDocument();
-    expect(screen.getByTestId('select-trigger')).toHaveTextContent('Cookie');
-  });
-
-  it('renders children and forwards props', () => {
-    fireEvent.click(screen.getByTestId('select-trigger'));
-    const selectContent = screen.getByTestId('select-content');
-    expect(selectContent).toHaveClass('my-content');
-    const triggerSpan = within(selectContent).getByText('This is the dessert content');
-    expect(triggerSpan).toBeInTheDocument();
-  });
-});
diff --git a/components/Select/SelectContent.tsx b/components/Select/SelectContent.tsx
deleted file mode 100644
index cfd1f32f..00000000
--- a/components/Select/SelectContent.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-// Copyright (c) Gridiron Survivor.
-// Licensed under the MIT License.
-
-'use client';
-
-import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { cn } from '@/lib/utils';
-import { SelectScrollDownButton } from './SelectScrollDownButton';
-import { SelectScrollUpButton } from './SelectScrollUpButton';
-
-export const SelectContent = forwardRef<
-  ElementRef<typeof SelectPrimitive.Content>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      data-testid="select-content"
-      ref={ref}
-      className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        position === 'popper' &&
-          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        className,
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          'p-1',
-          position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
diff --git a/components/Select/SelectItem.test.tsx b/components/Select/SelectItem.test.tsx
deleted file mode 100644
index 9525fec2..00000000
--- a/components/Select/SelectItem.test.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-// Copyright (c) Gridiron Survivor.
-// Licensed under the MIT License.
-
-import { render, screen, within, fireEvent } from '@testing-library/react';
-import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-  SelectLabel,
-  SelectGroup,
-} from '@/components/Select';
-
-describe('Select Item', () => {
-  beforeEach(() => {
-    render(
-      <Select defaultValue="basketball">
-        <SelectTrigger>
-          <SelectValue placeholder="Pick a sport" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Sports</SelectLabel>
-            <SelectItem value="basketball" className="my-item">
-              Basketball
-            </SelectItem>
-            <SelectItem value="football">Football</SelectItem>
-            <SelectItem value="soccer" disabled>
-              Soccer
-            </SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>,
-    );
-  });
-
-  it('opens the select content dropdown and its items when the trigger is clicked', () => {
-    fireEvent.click(screen.getByTestId('select-trigger'));
-    expect(
-      screen.getByRole('option', { name: 'Football' }),
-    ).toBeInTheDocument();
-  });
-
-  it('selects an item and renders its data state as checked', () => {
-    const selectTrigger = screen.getByTestId('select-trigger');
-    fireEvent.click(selectTrigger);
-    fireEvent.click(screen.getByRole('option', { name: 'Football' }));
-    expect(selectTrigger).toHaveTextContent('Football');
-
-    fireEvent.click(selectTrigger);
-    expect(screen.getByRole('option', { name: 'Football' })).toHaveAttribute(
-      'data-state',
-      'checked',
-    );
-  });
-
-  it("doesn't select a disabled item", () => {
-    fireEvent.click(screen.getByTestId('select-trigger'));
-    const disabledItem = screen.getByRole('option', { name: 'Soccer' });
-    fireEvent.click(disabledItem);
-    expect(screen.getByTestId('select-content')).toBeInTheDocument();
-    expect(screen.getByTestId('select-trigger')).toHaveTextContent(
-      'Basketball',
-    );
-  });
-
-  it('forwards props', () => {
-    fireEvent.click(screen.getByTestId('select-trigger'));
-    const selectItem = screen.getByRole('option', {
-      name: 'Basketball',
-    });
-    expect(selectItem).toHaveClass('my-item');
-  });
-});
diff --git a/components/Select/SelectItem.tsx b/components/Select/SelectItem.tsx
deleted file mode 100644
index 3bbc7043..00000000
--- a/components/Select/SelectItem.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// Copyright (c) Gridiron Survivor.
-// Licensed under the MIT License.
-
-'use client';
-
-import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { Check } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-export const SelectItem = forwardRef<
-  ElementRef<typeof SelectPrimitive.Item>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
diff --git a/components/Select/SelectLabel.test.tsx b/components/Select/SelectLabel.test.tsx
deleted file mode 100644
index 25be79ec..00000000
--- a/components/Select/SelectLabel.test.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-// Copyright (c) Gridiron Survivor.
-// Licensed under the MIT License.
-
-import { render, screen, within, fireEvent } from '@testing-library/react';
-import {
-  Select,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectGroup,
-} from '@/components/Select';
-
-describe('Select Label', () => {
-  beforeEach(() => {
-    render(
-      <Select>
-        <SelectTrigger />
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel className="my-label">
-              hello
-              <span>world</span>
-            </SelectLabel>
-          </SelectGroup>
-        </SelectContent>
-      </Select>,
-    );
-  });
-
-  it('renders provided label text', () => {
-    fireEvent.click(screen.getByTestId('select-trigger'));
-    expect(screen.getByTestId('select-label')).toBeInTheDocument();
-    expect(screen.getByText('hello')).toBeInTheDocument();
-  });
-
-  it('Forwards props and renders children', () => {
-    fireEvent.click(screen.getByTestId('select-trigger'));
-    const selectLabel = screen.getByTestId('select-label');
-    expect(selectLabel).toHaveClass('my-label');
-    const labelSpan = within(selectLabel).getByText('world');
-    expect(labelSpan).toBeInTheDocument();
-  });
-});
diff --git a/components/Select/SelectLabel.tsx b/components/Select/SelectLabel.tsx
deleted file mode 100644
index 88da1706..00000000
--- a/components/Select/SelectLabel.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright (c) Gridiron Survivor.
-// Licensed under the MIT License.
-
-'use client';
-
-import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { cn } from '@/lib/utils';
-
-export const SelectLabel = forwardRef<
-  ElementRef<typeof SelectPrimitive.Label>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    data-testid="select-label"
-    ref={ref}
-    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
diff --git a/components/Select/SelectScrollDownButton.tsx b/components/Select/SelectScrollDownButton.tsx
deleted file mode 100644
index 95ec0b62..00000000
--- a/components/Select/SelectScrollDownButton.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-// Copyright (c) Gridiron Survivor.
-// Licensed under the MIT License.
-
-'use client';
-
-import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { ChevronDown } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-export const SelectScrollDownButton = forwardRef<
-  ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    data-testid="select-scroll-down-button"
-    ref={ref}
-    className={cn(
-      'flex cursor-default items-center justify-center py-1',
-      className,
-    )}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName;
diff --git a/components/Select/SelectScrollUpButton.tsx b/components/Select/SelectScrollUpButton.tsx
deleted file mode 100644
index 89cc3f51..00000000
--- a/components/Select/SelectScrollUpButton.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// Copyright (c) Gridiron Survivor.
-// Licensed under the MIT License.
-
-'use client';
-
-import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { ChevronUp } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-export const SelectScrollUpButton = forwardRef<
-  ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    data-testid="select-scroll-up-button"
-    ref={ref}
-    className={cn(
-      'flex cursor-default items-center justify-center py-1',
-      className,
-    )}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
diff --git a/components/Select/SelectSeparator.test.tsx b/components/Select/SelectSeparator.test.tsx
deleted file mode 100644
index 26e52757..00000000
--- a/components/Select/SelectSeparator.test.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-// Copyright (c) Gridiron Survivor.
-// Licensed under the MIT License.
-
-import { render, screen, fireEvent } from '@testing-library/react';
-import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectSeparator,
-  SelectItem,
-} from '@/components/Select';
-
-describe('SelectSeparator', () => {
-  it('renders and forwards props', () => {
-    render(
-      <Select defaultValue="1">
-        <SelectTrigger>
-          <SelectValue placeholder="Choose…" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="1">One</SelectItem>
-          <SelectSeparator aria-label="foo" className="my-separator" />
-          <SelectItem value="2">Two</SelectItem>
-        </SelectContent>
-      </Select>,
-    );
-
-    fireEvent.click(screen.getByTestId('select-trigger'));
-
-    const sep = screen.getByTestId('select-separator');
-    expect(sep).toBeInTheDocument();
-    expect(sep).toHaveAttribute('aria-label', 'foo');
-    expect(sep).toHaveClass('my-separator');
-  });
-});
diff --git a/components/Select/SelectSeparator.tsx b/components/Select/SelectSeparator.tsx
deleted file mode 100644
index be6c2403..00000000
--- a/components/Select/SelectSeparator.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright (c) Gridiron Survivor.
-// Licensed under the MIT License.
-
-'use client';
-
-import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { cn } from '@/lib/utils';
-
-export const SelectSeparator = forwardRef<
-  ElementRef<typeof SelectPrimitive.Separator>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    data-testid="select-separator"
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
diff --git a/components/Select/SelectTrigger.test.tsx b/components/Select/SelectTrigger.test.tsx
deleted file mode 100644
index 773c9fd6..00000000
--- a/components/Select/SelectTrigger.test.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-// Copyright (c) Gridiron Survivor.
-// Licensed under the MIT License.
-
-import { render, screen, within, fireEvent } from '@testing-library/react';
-import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-  SelectLabel,
-  SelectGroup,
-} from '@/components/Select';
-
-describe('Select Trigger', () => {
-  beforeEach(() => {
-    render(
-      <Select defaultValue="apple">
-        <SelectTrigger aria-label="foo" className="my-trigger">
-          <span>Choose a fruit:</span>
-          <SelectValue placeholder="Pick a fruit..." />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="orange" disabled>
-              Orange
-            </SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>,
-    );
-  });
-
-  it('opens the dropdown when the trigger is clicked', () => {
-    expect(screen.queryByTestId('select-content')).toBeNull();
-    fireEvent.click(screen.getByTestId('select-trigger'));
-    expect(screen.getByTestId('select-content')).toBeInTheDocument();
-  });
-
-  it('selects an option, closes the dropdown, updates the trigger text, and marks the item as checked', () => {
-    const selectTrigger = screen.getByTestId('select-trigger');
-    fireEvent.click(selectTrigger);
-    fireEvent.click(screen.getByRole('option', { name: 'Banana' }));
-    expect(screen.queryByTestId('select-content')).toBeNull();
-    expect(selectTrigger).toHaveTextContent('Banana');
-
-    fireEvent.click(selectTrigger);
-    expect(screen.getByRole('option', { name: 'Banana' })).toHaveAttribute(
-      'data-state',
-      'checked',
-    );
-  });
-
-  it("doesn't select or close when a disabled item is clicked", () => {
-    fireEvent.click(screen.getByTestId('select-trigger'));
-    const disabledItem = screen.getByRole('option', { name: 'Orange' });
-    fireEvent.click(disabledItem);
-    expect(screen.getByTestId('select-content')).toBeInTheDocument();
-    expect(screen.getByTestId('select-trigger')).toHaveTextContent('Apple');
-  });
-
-  it('renders children and forwards props', () => {
-    const selectTrigger = screen.getByTestId('select-trigger');
-    expect(selectTrigger).toHaveAttribute('aria-label', 'foo');
-    expect(selectTrigger).toHaveClass('my-trigger');
-    const triggerSpan = within(selectTrigger).getByText('Choose a fruit:');
-    expect(triggerSpan).toBeInTheDocument();
-  });
-});
diff --git a/components/Select/SelectTrigger.tsx b/components/Select/SelectTrigger.tsx
deleted file mode 100644
index 52feedab..00000000
--- a/components/Select/SelectTrigger.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-// Copyright (c) Gridiron Survivor.
-// Licensed under the MIT License.
-
-'use client';
-
-import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { ChevronDown } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-export const SelectTrigger = forwardRef<
-  ElementRef<typeof SelectPrimitive.Trigger>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    data-testid="select-trigger"
-    ref={ref}
-    className={cn(
-      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
diff --git a/components/Select/index.ts b/components/Select/index.ts
deleted file mode 100644
index dedad12c..00000000
--- a/components/Select/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// Copyright (c) Gridiron Survivor.
-// Licensed under the MIT License.
-
-export { Select, SelectGroup, SelectValue } from './Select';
-export { SelectTrigger } from './SelectTrigger';
-export { SelectContent } from './SelectContent';
-export { SelectItem } from './SelectItem';
-export { SelectLabel } from './SelectLabel';
-export { SelectSeparator } from './SelectSeparator';
-export { SelectScrollUpButton } from './SelectScrollUpButton';
-export { SelectScrollDownButton } from './SelectScrollDownButton';
diff --git a/components/Select/select.tsx b/components/Select/select.tsx
new file mode 100644
index 00000000..38885e53
--- /dev/null
+++ b/components/Select/select.tsx
@@ -0,0 +1,159 @@
+'use client';
+
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
diff --git a/package.json b/package.json
index a98b98d5..59556c8d 100644
--- a/package.json
+++ b/package.json
@@ -49,17 +49,16 @@
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.27.0",
+    "@storybook/test": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/nextjs": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
     "@chromatic-com/storybook": "3",
     "@playwright/test": "^1.51.1",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-onboarding": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/nextjs": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/test": "^8.6.12",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
     "@types/node": "^20",
     "@types/react": "^18",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b2f45f24..84ab6b15 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -144,9 +144,6 @@ importers:
       '@testing-library/react':
         specifier: ^16.3.0
         version: 16.3.0(@testing-library/dom@10.4.0)(@types/react-dom@18.3.6(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@testing-library/user-event':
-        specifier: ^14.6.1
-        version: 14.6.1(@testing-library/dom@10.4.0)
       '@types/jest':
         specifier: ^29.5.14
         version: 29.5.14
@@ -2058,12 +2055,6 @@ packages:
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
-  '@testing-library/user-event@14.6.1':
-    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
-    engines: {node: '>=12', npm: '>=6'}
-    peerDependencies:
-      '@testing-library/dom': '>=7.21.4'
-
   '@tootallnate/once@2.0.0':
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}
@@ -8103,10 +8094,6 @@ snapshots:
     dependencies:
       '@testing-library/dom': 10.4.0
 
-  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.0)':
-    dependencies:
-      '@testing-library/dom': 10.4.0
-
   '@tootallnate/once@2.0.0': {}
 
   '@tsconfig/node10@1.0.11': {}

From e7a5d5336f607dd135e361dbf246ca68472ed212 Mon Sep 17 00:00:00 2001
From: luisarevalo21 <arevaloluis89@yahoo.com>
Date: Mon, 12 May 2025 18:01:02 -0700
Subject: [PATCH 11/16] fixed added txt file

---
 :wq | 37 -------------------------------------
 1 file changed, 37 deletions(-)
 delete mode 100644 :wq

diff --git a/:wq b/:wq
deleted file mode 100644
index bc2ab85b..00000000
--- a/:wq
+++ /dev/null
@@ -1,37 +0,0 @@
-Revert "merged develop"
-
-This reverts commit 5ea8eba58f6021be706d0d440b5ccde9502034ae.
-
-# Please enter the commit message for your changes. Lines starting
-# with '#' will be ignored, and an empty message aborts the commit.
-#
-# On branch luisA/258-GiftDetailsView-ESLint
-# Your branch is up to date with 'origin/luisA/258-GiftDetailsView-ESLint'.
-#
-# Changes to be committed:
-#	modified:   app/onboarding/page.tsx
-#	modified:   components/Button/button.tsx
-#	deleted:    components/NavLogo/NavLogo.test.tsx
-#	modified:   components/NavLogo/NavLogo.tsx
-#	deleted:    components/Select/Select.test.tsx
-#	deleted:    components/Select/Select.tsx
-#	deleted:    components/Select/SelectContent.test.tsx
-#	deleted:    components/Select/SelectContent.tsx
-#	deleted:    components/Select/SelectItem.test.tsx
-#	deleted:    components/Select/SelectItem.tsx
-#	deleted:    components/Select/SelectLabel.test.tsx
-#	deleted:    components/Select/SelectLabel.tsx
-#	deleted:    components/Select/SelectScrollDownButton.tsx
-#	deleted:    components/Select/SelectScrollUpButton.tsx
-#	deleted:    components/Select/SelectSeparator.test.tsx
-#	deleted:    components/Select/SelectSeparator.tsx
-#	deleted:    components/Select/SelectTrigger.test.tsx
-#	deleted:    components/Select/SelectTrigger.tsx
-#	deleted:    components/Select/index.ts
-#	new file:   components/Select/select.tsx
-#	modified:   package.json
-#	modified:   pnpm-lock.yaml
-#
-# Untracked files:
-#	.vscode/
-#

From 209b484acfdfc759b06f6bddde4898a5b1ecec46 Mon Sep 17 00:00:00 2001
From: luisarevalo21 <arevaloluis89@yahoo.com>
Date: Mon, 12 May 2025 18:17:32 -0700
Subject: [PATCH 12/16] fixed: adjusted the handle amazon link, passing the
 string

---
 components/GiftDetailsView/GiftDetailsView.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/GiftDetailsView/GiftDetailsView.tsx b/components/GiftDetailsView/GiftDetailsView.tsx
index 967eedb2..caf82053 100644
--- a/components/GiftDetailsView/GiftDetailsView.tsx
+++ b/components/GiftDetailsView/GiftDetailsView.tsx
@@ -31,7 +31,12 @@ const GiftDetailsView = ({
     setImageError(true);
   }, []);
 
-  const handleAmazonLink = (searchTerm) => {
+  /**
+   * Search Term details
+   * @param {string} searchTerm - search term being passed in to search amazon list
+   * @returns {string} - returns an encoded search string with the search term
+   */
+  const handleAmazonLink = (searchTerm: string): string => {
     const encodedSearch = encodeURIComponent(searchTerm).replace(/%20/g, '+');
     return `https://www.amazon.com/s?k=${encodedSearch}`;
   };
@@ -80,13 +85,13 @@ const GiftDetailsView = ({
       <CardFooter className="flex flex-col">
         <div className="flex justify-between w-full">
           <a
-            href={handleAmazonLink({ searchTerm: gift.title })}
+            href={handleAmazonLink(gift.title)}
             target="_blank"
             rel="noopener noreferrer"
           >
             <Button
               className="text-sm w-32 h-9 bg-primaryButtonYellow hover:bg-primaryButtonYelow70"
-              onClick={() => handleAmazonLink({ searchTerm: gift.title })}
+              onClick={() => handleAmazonLink(gift.title)}
             >
               <SquareArrowOutUpRight /> View
             </Button>

From 9d11be5dca7cb1ebbe7c6a7a5f9703942d901b57 Mon Sep 17 00:00:00 2001
From: luisarevalo21 <arevaloluis89@yahoo.com>
Date: Tue, 13 May 2025 14:08:36 -0700
Subject: [PATCH 13/16] fix: removed vscode folder

---
 .vscode/settings.json | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 6b0e5abf..00000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "postman.settings.dotenv-detection-notification-visibility": false
-}
\ No newline at end of file

From 5d6cacde9027e01607cec58beb5abc36b2b43efc Mon Sep 17 00:00:00 2001
From: luisarevalo21 <arevaloluis89@yahoo.com>
Date: Tue, 27 May 2025 19:36:34 -0700
Subject: [PATCH 14/16] fix: re-added isValidURL outside the component function

---
 .../GiftDetailsView/GiftDetailsView.tsx       | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/components/GiftDetailsView/GiftDetailsView.tsx b/components/GiftDetailsView/GiftDetailsView.tsx
index ef578876..cc367624 100644
--- a/components/GiftDetailsView/GiftDetailsView.tsx
+++ b/components/GiftDetailsView/GiftDetailsView.tsx
@@ -14,6 +14,20 @@ import { GiftSuggestion } from '@/app/types/giftSuggestion';
 import { useState, useCallback, JSX } from 'react';
 import { IGiftDetailsViewProps } from './IGiftDetailsViewProps';
 
+/**
+ * Helper function to validate urlStrings
+ * @param {string} urlString - search string to validate
+ * @returns {boolean} - returns if string was valid or not
+ */
+const isValidUrl = (urlString: string): boolean => {
+  try {
+    new URL(urlString);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
 /**
  * A GiftDetailsView compoennt
  * @param {object} props - The component props
@@ -41,20 +55,6 @@ const GiftDetailsView = ({
     return `https://www.amazon.com/s?k=${encodedSearch}`;
   };
 
-  /**
-   * Helper function to validate urlStrings
-   * @param {string} urlString - search string to validate
-   * @returns {boolean} - returns if string was valid or not
-   */
-  const isValidUrl = (urlString: string): boolean => {
-    try {
-      new URL(urlString);
-      return true;
-    } catch {
-      return false;
-    }
-  };
-
   return (
     <>
       <div className="relative w-full h-40 bg-white rounded-t-md">

From 3332e31a772084702e8b3cbd8e3f23d3b7baaf7a Mon Sep 17 00:00:00 2001
From: luisarevalo21 <arevaloluis89@yahoo.com>
Date: Fri, 27 Jun 2025 20:13:01 -0700
Subject: [PATCH 15/16] fix: fixed linting issue with the giftDetailsView

---
 components/GiftDetailsView/GiftDetailsView.tsx      | 2 +-
 components/GiftDetailsView/IGiftDetailsViewProps.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/GiftDetailsView/GiftDetailsView.tsx b/components/GiftDetailsView/GiftDetailsView.tsx
index 4de18272..c2c73c78 100644
--- a/components/GiftDetailsView/GiftDetailsView.tsx
+++ b/components/GiftDetailsView/GiftDetailsView.tsx
@@ -30,7 +30,7 @@ const isValidUrl = (urlString: string): boolean => {
 /**
  * A GiftDetailsView compoennt
  * @param {object} props - The component props
- * @param {GiftSuggestion} props.gift - Gift suggestion being passed
+ * @param {IGiftSuggestion} props.gift - Gift suggestion being passed
  * @param {() => void} props.handleFeedback - Callback function triggered when feedback is provided
  * @returns {JSX.Element} - the rendered GiftDetailsView
  */
diff --git a/components/GiftDetailsView/IGiftDetailsViewProps.ts b/components/GiftDetailsView/IGiftDetailsViewProps.ts
index db768676..ca3c6368 100644
--- a/components/GiftDetailsView/IGiftDetailsViewProps.ts
+++ b/components/GiftDetailsView/IGiftDetailsViewProps.ts
@@ -1,9 +1,9 @@
 // Copyright (c) Gridiron Survivor.
 // Licensed under the MIT License.
 
-import { GiftSuggestion } from '@/app/types/giftSuggestion';
+import { IGiftSuggestion } from '@/app/types/giftSuggestion';
 
 export interface IGiftDetailsViewProps {
-  gift: GiftSuggestion;
+  gift: IGiftSuggestion;
   handleFeedback: () => void;
 }

From 4f1e5c269bf31fca07833240d9a891900e553f5b Mon Sep 17 00:00:00 2001
From: Shashi Lo <362527+shashilo@users.noreply.github.com>
Date: Thu, 11 Sep 2025 16:03:14 -0500
Subject: [PATCH 16/16] Update components/GiftDetailsView/GiftDetailsView.tsx

Co-authored-by: Nick Taylor <nick@nickyt.co>
---
 components/GiftDetailsView/GiftDetailsView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/GiftDetailsView/GiftDetailsView.tsx b/components/GiftDetailsView/GiftDetailsView.tsx
index c2c73c78..abd42749 100644
--- a/components/GiftDetailsView/GiftDetailsView.tsx
+++ b/components/GiftDetailsView/GiftDetailsView.tsx
@@ -119,7 +119,7 @@ const GiftDetailsView = ({
             rel="noopener noreferrer"
           >
             <Button
-              className="text-sm w-32 h-9 bg-primaryButtonYellow hover:bg-primaryButtonYelow70"
+              className="text-sm w-32 h-9 bg-primaryButtonYellow hover:bg-primaryButtonYellow70"
               onClick={() => handleAmazonLink(gift.title)}
             >
               <SquareArrowOutUpRight /> View