Cleanup code and tests

tests/integration/ContextMenu.integration.test.jsx

@@ -59,7 +59,7 @@ describe("ContextMenu Components Integration", () => {
 
       const action1 = screen.getByRole("menuitem", { name: "Action 1" });
       expect(action1).toHaveClass(
-        "bg-[var(--color-surface-default-secondary)]"
+        "bg-[var(--color-surface-default-secondary)]",
       );
     });
 
@@ -97,10 +97,10 @@ describe("ContextMenu Components Integration", () => {
       const enabledItems = items.filter(
         (item) =>
           !item.hasAttribute("aria-disabled") ||
-          item.getAttribute("aria-disabled") !== "true"
+          item.getAttribute("aria-disabled") !== "true",
       );
       const disabledItems = items.filter(
-        (item) => item.getAttribute("aria-disabled") === "true"
+        (item) => item.getAttribute("aria-disabled") === "true",
       );
 
       enabledItems.forEach((item) => {
@@ -177,7 +177,7 @@ describe("ContextMenu Components Integration", () => {
           ]}
           selectedValue=""
           onItemClick={onItemClick}
-        />
+        />,
       );
 
       const item1 = screen.getByText("Item 1");
@@ -194,12 +194,12 @@ describe("ContextMenu Components Integration", () => {
           ]}
           selectedValue="1"
           onItemClick={onItemClick}
-        />
+        />,
       );
 
       expect(screen.getByText("Item 3")).toBeInTheDocument();
       expect(screen.getByRole("menuitem", { name: "Item 1" })).toHaveClass(
-        "bg-[var(--color-surface-default-secondary)]"
+        "bg-[var(--color-surface-default-secondary)]",
       );
     });
 
@@ -213,7 +213,7 @@ describe("ContextMenu Components Integration", () => {
           ]}
           selectedValue="2"
           onItemClick={vi.fn()}
-        />
+        />,
       );
 
       expect(screen.getByText("Item 2")).toBeInTheDocument();
@@ -226,7 +226,7 @@ describe("ContextMenu Components Integration", () => {
           ]}
           selectedValue=""
           onItemClick={vi.fn()}
-        />
+        />,
       );
 
       expect(screen.queryByText("Item 2")).not.toBeInTheDocument();
@@ -278,7 +278,7 @@ describe("ContextMenu Components Integration", () => {
 
       expect(screen.getByText("Option 1")).toBeInTheDocument();
       expect(
-        screen.getByRole("button", { name: "Close Menu" })
+        screen.getByRole("button", { name: "Close Menu" }),
       ).toBeInTheDocument();
     });
 
@@ -294,7 +294,7 @@ describe("ContextMenu Components Integration", () => {
 
       expect(screen.queryByText("Option 1")).not.toBeInTheDocument();
       expect(
-        screen.getByRole("button", { name: "Open Menu" })
+        screen.getByRole("button", { name: "Open Menu" }),
       ).toBeInTheDocument();
     });
   });
@@ -338,7 +338,7 @@ describe("ContextMenu Components Integration", () => {
           <ContextMenuItem onClick={vi.fn()} selected={false}>
             Item 2
           </ContextMenuItem>
-        </ContextMenu>
+        </ContextMenu>,
       );
 
       // Rapidly change selection state
@@ -351,7 +351,7 @@ describe("ContextMenu Components Integration", () => {
             <ContextMenuItem onClick={vi.fn()} selected={i % 2 === 1}>
               Item 2
             </ContextMenuItem>
-          </ContextMenu>
+          </ContextMenu>,
         );
       }
 
@@ -366,7 +366,7 @@ describe("ContextMenu Components Integration", () => {
       render(
         <ContextMenu>
           <ContextMenuItem>Item without onClick</ContextMenuItem>
-        </ContextMenu>
+        </ContextMenu>,
       );
 
       const item = screen.getByText("Item without onClick");
@@ -379,7 +379,7 @@ describe("ContextMenu Components Integration", () => {
           <ContextMenuItem onClick={vi.fn()} selected={null}>
             Item with invalid selected
           </ContextMenuItem>
-        </ContextMenu>
+        </ContextMenu>,
       );
 
       const item = screen.getByText("Item with invalid selected");

tests/integration/Input.integration.test.jsx

@@ -160,7 +160,7 @@ describe("Input Component Integration", () => {
     fireEvent.change(input, { target: { value: "ab" } });
     expect(screen.getByTestId("error-message")).toBeInTheDocument();
     expect(input).toHaveClass(
-      "border-[var(--color-border-default-utility-negative)]"
+      "border-[var(--color-border-default-utility-negative)]",
     );
 
     // Type longer value - should hide error
@@ -175,7 +175,7 @@ describe("Input Component Integration", () => {
         <Input label="Email Input" type="email" />
         <Input label="Password Input" type="password" />
         <Input label="Number Input" type="number" />
-      </div>
+      </div>,
     );
 
     const textInput = screen.getByLabelText("Text Input");
@@ -210,7 +210,7 @@ describe("Input Component Integration", () => {
           size="large"
           labelVariant="horizontal"
         />
-      </div>
+      </div>,
     );
 
     // All inputs should be present
@@ -231,7 +231,7 @@ describe("Input Component Integration", () => {
         onChange={handleChange}
         onFocus={vi.fn()}
         onBlur={vi.fn()}
-      />
+      />,
     );
 
     const input = screen.getByLabelText("Disabled Input");
@@ -252,7 +252,7 @@ describe("Input Component Integration", () => {
     const input = screen.getByLabelText("Error Input");
 
     expect(input).toHaveClass(
-      "border-[var(--color-border-default-utility-negative)]"
+      "border-[var(--color-border-default-utility-negative)]",
     );
     expect(input).not.toBeDisabled();
   });
@@ -287,7 +287,7 @@ describe("Input Component Integration", () => {
     fireEvent.click(hoverButton);
     expect(input).toHaveClass("border-[var(--color-border-default-tertiary)]");
     expect(input).toHaveClass(
-      "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]"
+      "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
     );
 
     // Set active state
@@ -297,7 +297,7 @@ describe("Input Component Integration", () => {
     // Focus state
     fireEvent.focus(input);
     expect(input).toHaveClass(
-      "border-[var(--color-border-default-utility-info)]"
+      "border-[var(--color-border-default-utility-info)]",
     );
     expect(input).toHaveClass("shadow-[0_0_5px_3px_#3281F8]");
   });
@@ -308,7 +308,7 @@ describe("Input Component Integration", () => {
         <Input label="First Input" />
         <Input label="Second Input" />
         <Input label="Third Input" />
-      </div>
+      </div>,
     );
 
     const firstInput = screen.getByLabelText("First Input");
@@ -345,7 +345,7 @@ describe("Input Component Integration", () => {
       <form onSubmit={handleSubmit}>
         <Input label="Test Input" name="testField" />
         <button type="submit">Submit</button>
-      </form>
+      </form>,
     );
 
     const input = screen.getByLabelText("Test Input");
@@ -408,7 +408,7 @@ describe("Input Component Integration", () => {
     // Initial state
     expect(input).not.toBeDisabled();
     expect(input).not.toHaveClass(
-      "border-[var(--color-border-default-utility-negative)]"
+      "border-[var(--color-border-default-utility-negative)]",
     );
 
     // Toggle disabled
@@ -420,7 +420,7 @@ describe("Input Component Integration", () => {
     fireEvent.click(toggleErrorButton); // Turn on error
     // The error state applies the border color through the stateStyles.input class
     expect(input).toHaveClass(
-      "border-[var(--color-border-default-utility-negative)]"
+      "border-[var(--color-border-default-utility-negative)]",
     );
   });
 });

tests/integration/RadioButton.integration.test.jsx

@@ -131,13 +131,13 @@ describe("RadioButton Integration", () => {
 
     // Initially standard mode
     expect(radioButton).toHaveClass(
-      "outline-[var(--color-border-default-tertiary)]"
+      "outline-[var(--color-border-default-tertiary)]",
     );
 
     // Switch to inverse mode
     await user.click(toggleButton);
     expect(radioButton).toHaveClass(
-      "outline-[var(--color-border-inverse-primary)]"
+      "outline-[var(--color-border-inverse-primary)]",
     );
   });
 
@@ -231,13 +231,13 @@ describe("RadioButton Integration", () => {
     await user.click(group1OptionB);
     await user.click(group2OptionY);
 
-    const group1Inputs = screen.getAllByDisplayValue("option2").filter(
-      input => input.getAttribute("name") === "group1"
-    );
-    const group2Inputs = screen.getAllByDisplayValue("option2").filter(
-      input => input.getAttribute("name") === "group2"
-    );
-    
+    const group1Inputs = screen
+      .getAllByDisplayValue("option2")
+      .filter((input) => input.getAttribute("name") === "group1");
+    const group2Inputs = screen
+      .getAllByDisplayValue("option2")
+      .filter((input) => input.getAttribute("name") === "group2");
+
     expect(group1Inputs[0]).toBeChecked();
     expect(group2Inputs[0]).toBeChecked();
   });
@@ -309,13 +309,13 @@ describe("RadioButton Integration", () => {
     await user.click(controlledOption2);
     await user.click(uncontrolledOption2);
 
-    const controlledInputs = screen.getAllByDisplayValue("option2").filter(
-      input => input.getAttribute("name") === "controlled"
-    );
-    const uncontrolledInputs = screen.getAllByDisplayValue("option2").filter(
-      input => input.getAttribute("name") === "uncontrolled"
-    );
-    
+    const controlledInputs = screen
+      .getAllByDisplayValue("option2")
+      .filter((input) => input.getAttribute("name") === "controlled");
+    const uncontrolledInputs = screen
+      .getAllByDisplayValue("option2")
+      .filter((input) => input.getAttribute("name") === "uncontrolled");
+
     expect(controlledInputs[0]).toBeChecked();
     expect(uncontrolledInputs[0]).toBeChecked();
   });

tests/integration/RadioGroup.integration.test.jsx

@@ -14,10 +14,10 @@ describe("RadioGroup Integration", () => {
   it("works in form context", async () => {
     const user = userEvent.setup();
     const handleSubmit = vi.fn();
-    
+
     function TestForm() {
       const [value, setValue] = useState("option1");
-      
+
       return (
         <form onSubmit={handleSubmit}>
           <RadioGroup
@@ -53,10 +53,10 @@ describe("RadioGroup Integration", () => {
   it("handles keyboard navigation", async () => {
     const user = userEvent.setup();
     const handleChange = vi.fn();
-    
+
     function KeyboardForm() {
       const [value, setValue] = useState("option1");
-      
+
       return (
         <RadioGroup
           name="keyboard-radio-group"
@@ -70,15 +70,15 @@ describe("RadioGroup Integration", () => {
     render(<KeyboardForm />);
 
     const radioButtons = screen.getAllByRole("radio");
-    
+
     // Focus first radio button
     radioButtons[0].focus();
     expect(radioButtons[0]).toHaveFocus();
-    
+
     // Navigate to second radio button
     await user.tab();
     expect(radioButtons[1]).toHaveFocus();
-    
+
     // Activate with Space
     await user.keyboard(" ");
     expect(screen.getByDisplayValue("option2")).toBeChecked();
@@ -88,10 +88,14 @@ describe("RadioGroup Integration", () => {
     function ModeSwitchForm() {
       const [mode, setMode] = useState("standard");
       const [value, setValue] = useState("option1");
-      
+
       return (
         <div>
-          <button onClick={() => setMode(mode === "standard" ? "inverse" : "standard")}>
+          <button
+            onClick={() =>
+              setMode(mode === "standard" ? "inverse" : "standard")
+            }
+          >
             Toggle Mode
           </button>
           <RadioGroup
@@ -110,16 +114,20 @@ describe("RadioGroup Integration", () => {
 
     const toggleButton = screen.getByRole("button");
     const radioButtons = screen.getAllByRole("radio");
-    
+
     // Initially standard mode
-    radioButtons.forEach(button => {
-      expect(button).toHaveClass("outline-[var(--color-border-default-tertiary)]");
+    radioButtons.forEach((button) => {
+      expect(button).toHaveClass(
+        "outline-[var(--color-border-default-tertiary)]",
+      );
     });
-    
+
     // Switch to inverse mode
     await user.click(toggleButton);
-    radioButtons.forEach(button => {
-      expect(button).toHaveClass("outline-[var(--color-border-inverse-primary)]");
+    radioButtons.forEach((button) => {
+      expect(button).toHaveClass(
+        "outline-[var(--color-border-inverse-primary)]",
+      );
     });
   });
 
@@ -127,7 +135,7 @@ describe("RadioGroup Integration", () => {
     function StateForm() {
       const [value, setValue] = useState("option1");
       const [count, setCount] = useState(0);
-      
+
       return (
         <div>
           <button onClick={() => setCount(count + 1)}>
@@ -148,10 +156,10 @@ describe("RadioGroup Integration", () => {
 
     const radioButtons = screen.getAllByRole("radio");
     const reRenderButton = screen.getByRole("button");
-    
+
     // Should be checked initially
     expect(radioButtons[0]).toHaveAttribute("aria-checked", "true");
-    
+
     // Re-render should maintain state
     user.click(reRenderButton);
     expect(radioButtons[0]).toHaveAttribute("aria-checked", "true");
@@ -161,7 +169,7 @@ describe("RadioGroup Integration", () => {
     function MultiGroupForm() {
       const [group1Value, setGroup1Value] = useState("option1");
       const [group2Value, setGroup2Value] = useState("option1");
-      
+
       return (
         <div>
           <div>
@@ -191,27 +199,27 @@ describe("RadioGroup Integration", () => {
 
     // Both groups should work independently
     // Find the Option 2 in group1 by filtering getAllByDisplayValue by name
-    const group1Option2Input = screen.getAllByDisplayValue("option2").find(
-      input => input.getAttribute("name") === "group1"
-    );
+    const group1Option2Input = screen
+      .getAllByDisplayValue("option2")
+      .find((input) => input.getAttribute("name") === "group1");
     const group1Option2 = group1Option2Input.closest("label");
-    
+
     // Find the Option 3 in group2 by filtering getAllByDisplayValue by name
-    const group2Option3Input = screen.getAllByDisplayValue("option3").find(
-      input => input.getAttribute("name") === "group2"
-    );
+    const group2Option3Input = screen
+      .getAllByDisplayValue("option3")
+      .find((input) => input.getAttribute("name") === "group2");
     const group2Option3 = group2Option3Input.closest("label");
-    
+
     await user.click(group1Option2);
     await user.click(group2Option3);
-    
-    const group1Inputs = screen.getAllByDisplayValue("option2").filter(
-      input => input.getAttribute("name") === "group1"
-    );
-    const group2Inputs = screen.getAllByDisplayValue("option3").filter(
-      input => input.getAttribute("name") === "group2"
-    );
-    
+
+    const group1Inputs = screen
+      .getAllByDisplayValue("option2")
+      .filter((input) => input.getAttribute("name") === "group1");
+    const group2Inputs = screen
+      .getAllByDisplayValue("option3")
+      .filter((input) => input.getAttribute("name") === "group2");
+
     expect(group1Inputs[0]).toBeChecked();
     expect(group2Inputs[0]).toBeChecked();
   });
@@ -220,7 +228,7 @@ describe("RadioGroup Integration", () => {
     function ControlledForm() {
       const [controlledValue, setControlledValue] = useState("option1");
       const [uncontrolledValue, setUncontrolledValue] = useState("option1");
-      
+
       return (
         <div>
           <div>
@@ -250,27 +258,27 @@ describe("RadioGroup Integration", () => {
 
     // Both should work the same way
     // Find the Option 2 in controlled group by filtering getAllByDisplayValue by name
-    const controlledOption2Input = screen.getAllByDisplayValue("option2").find(
-      input => input.getAttribute("name") === "controlled"
-    );
+    const controlledOption2Input = screen
+      .getAllByDisplayValue("option2")
+      .find((input) => input.getAttribute("name") === "controlled");
     const controlledOption2 = controlledOption2Input.closest("label");
-    
+
     // Find the Option 2 in uncontrolled group by filtering getAllByDisplayValue by name
-    const uncontrolledOption2Input = screen.getAllByDisplayValue("option2").find(
-      input => input.getAttribute("name") === "uncontrolled"
-    );
+    const uncontrolledOption2Input = screen
+      .getAllByDisplayValue("option2")
+      .find((input) => input.getAttribute("name") === "uncontrolled");
     const uncontrolledOption2 = uncontrolledOption2Input.closest("label");
-    
+
     await user.click(controlledOption2);
     await user.click(uncontrolledOption2);
-    
-    const controlledInputs = screen.getAllByDisplayValue("option2").filter(
-      input => input.getAttribute("name") === "controlled"
-    );
-    const uncontrolledInputs = screen.getAllByDisplayValue("option2").filter(
-      input => input.getAttribute("name") === "uncontrolled"
-    );
-    
+
+    const controlledInputs = screen
+      .getAllByDisplayValue("option2")
+      .filter((input) => input.getAttribute("name") === "controlled");
+    const uncontrolledInputs = screen
+      .getAllByDisplayValue("option2")
+      .filter((input) => input.getAttribute("name") === "uncontrolled");
+
     expect(controlledInputs[0]).toBeChecked();
     expect(uncontrolledInputs[0]).toBeChecked();
   });
@@ -278,13 +286,13 @@ describe("RadioGroup Integration", () => {
   it("handles accessibility in complex forms", () => {
     function AccessibleForm() {
       const [value, setValue] = useState("option1");
-      
+
       const accessibleOptions = [
         { value: "option1", label: "Option 1", ariaLabel: "First option" },
         { value: "option2", label: "Option 2", ariaLabel: "Second option" },
         { value: "option3", label: "Option 3", ariaLabel: "Third option" },
       ];
-      
+
       return (
         <form>
           <fieldset>
@@ -305,16 +313,16 @@ describe("RadioGroup Integration", () => {
 
     const radioGroup = screen.getByRole("radiogroup");
     const radioButtons = screen.getAllByRole("radio");
-    
+
     // Should have proper accessibility attributes
     expect(radioGroup).toHaveAttribute("aria-label", "Accessible radio group");
-    
-    radioButtons.forEach(button => {
+
+    radioButtons.forEach((button) => {
       expect(button).toHaveAttribute("role", "radio");
       expect(button).toHaveAttribute("aria-checked");
       expect(button).toHaveAttribute("tabIndex", "0");
     });
-    
+
     // Should have aria-labels
     expect(radioButtons[0]).toHaveAttribute("aria-label", "First option");
     expect(radioButtons[1]).toHaveAttribute("aria-label", "Second option");
@@ -325,10 +333,14 @@ describe("RadioGroup Integration", () => {
     function DynamicForm() {
       const [value, setValue] = useState("option1");
       const [options, setOptions] = useState(defaultOptions);
-      
+
       return (
         <div>
-          <button onClick={() => setOptions([...options, { value: "option4", label: "Option 4" }])}>
+          <button
+            onClick={() =>
+              setOptions([...options, { value: "option4", label: "Option 4" }])
+            }
+          >
             Add Option
           </button>
           <RadioGroup
@@ -345,10 +357,10 @@ describe("RadioGroup Integration", () => {
     render(<DynamicForm />);
 
     const addButton = screen.getByRole("button");
-    
+
     // Initially 3 options
     expect(screen.getAllByRole("radio")).toHaveLength(3);
-    
+
     // Add option
     await user.click(addButton);
     expect(screen.getAllByRole("radio")).toHaveLength(4);
@@ -358,7 +370,7 @@ describe("RadioGroup Integration", () => {
   it("handles empty options gracefully", () => {
     function EmptyForm() {
       const [value, setValue] = useState("");
-      
+
       return (
         <RadioGroup
           name="empty-radio-group"
@@ -379,10 +391,10 @@ describe("RadioGroup Integration", () => {
   it("maintains single selection behavior", async () => {
     const user = userEvent.setup();
     const handleChange = vi.fn();
-    
+
     function SingleSelectionForm() {
       const [value, setValue] = useState("option1");
-      
+
       return (
         <RadioGroup
           name="single-selection-radio-group"
@@ -399,21 +411,21 @@ describe("RadioGroup Integration", () => {
     render(<SingleSelectionForm />);
 
     const radioButtons = screen.getAllByRole("radio");
-    
+
     // Initially option1 should be selected
     expect(radioButtons[0]).toHaveAttribute("aria-checked", "true");
     expect(radioButtons[1]).toHaveAttribute("aria-checked", "false");
     expect(radioButtons[2]).toHaveAttribute("aria-checked", "false");
-    
+
     // Click option2
     const option2 = screen.getByText("Option 2").closest("label");
     await user.click(option2);
-    
+
     // Only option2 should be selected
     expect(radioButtons[0]).toHaveAttribute("aria-checked", "false");
     expect(radioButtons[1]).toHaveAttribute("aria-checked", "true");
     expect(radioButtons[2]).toHaveAttribute("aria-checked", "false");
-    
+
     expect(handleChange).toHaveBeenCalledWith("option2");
   });
 });

tests/integration/Select.integration.test.jsx

@@ -71,7 +71,7 @@ describe("Select Component Integration", () => {
       await user.click(submitButton);
 
       expect(screen.getByTestId("error")).toHaveTextContent(
-        "Please select an option"
+        "Please select an option",
       );
     });
 
@@ -298,17 +298,17 @@ describe("Select Component Integration", () => {
         name: /Dynamic Select/,
       });
       expect(selectButton).not.toHaveClass(
-        "border-[var(--color-border-default-utility-negative)]"
+        "border-[var(--color-border-default-utility-negative)]",
       );
 
       rerender(<DynamicSelect error={true} />);
       expect(selectButton).toHaveClass(
-        "border-[var(--color-border-default-utility-negative)]"
+        "border-[var(--color-border-default-utility-negative)]",
       );
 
       rerender(<DynamicSelect error={false} />);
       expect(selectButton).not.toHaveClass(
-        "border-[var(--color-border-default-utility-negative)]"
+        "border-[var(--color-border-default-utility-negative)]",
       );
     });
 
@@ -339,7 +339,7 @@ describe("Select Component Integration", () => {
       expect(selectButton).toHaveFocus();
       // Should have focus state styling, not active state
       expect(selectButton).toHaveClass(
-        "focus-visible:border-[var(--color-border-default-utility-info)]"
+        "focus-visible:border-[var(--color-border-default-utility-info)]",
       );
     });
 
@@ -354,7 +354,7 @@ describe("Select Component Integration", () => {
       // Click should not trigger focus-visible styles (class is always present but only active on keyboard focus)
       // The focus-visible class is always in the component but only applies on keyboard focus
       expect(selectButton).toHaveClass(
-        "focus-visible:border-[var(--color-border-default-utility-info)]"
+        "focus-visible:border-[var(--color-border-default-utility-info)]",
       );
     });
   });
@@ -392,7 +392,7 @@ describe("Select Component Integration", () => {
           label="Large Select"
           placeholder="Select an option"
           options={largeOptions}
-        />
+        />,
       );
 
       const selectButton = screen.getByRole("button", { name: /Large Select/ });

tests/integration/Switch.integration.test.jsx

@@ -74,7 +74,7 @@ describe("Switch Integration", () => {
         <Switch label="First Switch" />
         <Switch label="Second Switch" />
         <Switch label="Third Switch" />
-      </div>
+      </div>,
     );
 
     const switches = screen.getAllByRole("switch");
@@ -238,7 +238,7 @@ describe("Switch Integration", () => {
       await waitFor(() => {
         expect(switchButton).toHaveAttribute(
           "aria-checked",
-          i % 2 === 0 ? "true" : "false"
+          i % 2 === 0 ? "true" : "false",
         );
       });
     }
@@ -251,7 +251,7 @@ describe("Switch Integration", () => {
         <Switch label="Another Text Switch" />
         <Switch />
         <Switch label="Final Switch" />
-      </div>
+      </div>,
     );
 
     const switches = screen.getAllByRole("switch");

tests/integration/TextArea.integration.test.jsx

@@ -110,20 +110,20 @@ describe("TextArea Integration Tests", () => {
     const { rerender } = render(<DynamicTextArea state="default" />);
     let textarea = screen.getByRole("textbox");
     expect(textarea).toHaveClass(
-      "border-[var(--color-border-default-tertiary)]"
+      "border-[var(--color-border-default-tertiary)]",
     );
 
     rerender(<DynamicTextArea state="hover" />);
     textarea = screen.getByRole("textbox");
     expect(textarea).toHaveClass(
-      "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]"
+      "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
     );
 
     rerender(<DynamicTextArea state="focus" />);
     textarea = screen.getByRole("textbox");
     expect(textarea).toHaveClass(
       "border-[var(--color-border-default-utility-info)]",
-      "shadow-[0_0_5px_3px_#3281F8]"
+      "shadow-[0_0_5px_3px_#3281F8]",
     );
   });
 
@@ -141,13 +141,13 @@ describe("TextArea Integration Tests", () => {
     const { rerender } = render(<DynamicTextArea error={false} />);
     let textarea = screen.getByRole("textbox");
     expect(textarea).toHaveClass(
-      "border-[var(--color-border-default-tertiary)]"
+      "border-[var(--color-border-default-tertiary)]",
     );
 
     rerender(<DynamicTextArea error={true} />);
     textarea = screen.getByRole("textbox");
     expect(textarea).toHaveClass(
-      "border-[var(--color-border-default-utility-negative)]"
+      "border-[var(--color-border-default-utility-negative)]",
     );
   });
 
@@ -181,7 +181,7 @@ describe("TextArea Integration Tests", () => {
         label="Test TextArea"
         onFocus={handleFocus}
         onBlur={handleBlur}
-      />
+      />,
     );
 
     const textarea = screen.getByRole("textbox");
@@ -212,17 +212,17 @@ describe("TextArea Integration Tests", () => {
           label="Large TextArea"
           placeholder="Large placeholder"
         />
-      </div>
+      </div>,
     );
 
     expect(
-      screen.getByPlaceholderText("Small placeholder")
+      screen.getByPlaceholderText("Small placeholder"),
     ).toBeInTheDocument();
     expect(
-      screen.getByPlaceholderText("Medium placeholder")
+      screen.getByPlaceholderText("Medium placeholder"),
     ).toBeInTheDocument();
     expect(
-      screen.getByPlaceholderText("Large placeholder")
+      screen.getByPlaceholderText("Large placeholder"),
     ).toBeInTheDocument();
   });
 
@@ -236,7 +236,7 @@ describe("TextArea Integration Tests", () => {
           placeholder="Disabled input"
           disabled
         />
-      </div>
+      </div>,
     );
 
     const validTextarea = screen.getByPlaceholderText("Valid input");
@@ -244,10 +244,10 @@ describe("TextArea Integration Tests", () => {
     const disabledTextarea = screen.getByPlaceholderText("Disabled input");
 
     expect(validTextarea).toHaveClass(
-      "border-[var(--color-border-default-tertiary)]"
+      "border-[var(--color-border-default-tertiary)]",
     );
     expect(invalidTextarea).toHaveClass(
-      "border-[var(--color-border-default-utility-negative)]"
+      "border-[var(--color-border-default-utility-negative)]",
     );
     expect(disabledTextarea).toBeDisabled();
   });

tests/integration/Toggle.integration.test.jsx

@@ -12,7 +12,7 @@ describe("Toggle Integration", () => {
       <form onSubmit={handleSubmit}>
         <Toggle label="Test Toggle" name="toggle" />
         <button type="submit">Submit</button>
-      </form>
+      </form>,
     );
 
     const toggle = screen.getByRole("switch", { name: "Test Toggle" });
@@ -32,7 +32,7 @@ describe("Toggle Integration", () => {
         <Toggle label="First Toggle" />
         <Toggle label="Second Toggle" />
         <Toggle label="Third Toggle" />
-      </div>
+      </div>,
     );
 
     const firstToggle = screen.getByRole("switch", { name: "First Toggle" });
@@ -72,7 +72,7 @@ describe("Toggle Integration", () => {
       <div>
         <Toggle label="First Toggle" onChange={handleChange1} />
         <Toggle label="Second Toggle" onChange={handleChange2} />
-      </div>
+      </div>,
     );
 
     const firstToggle = screen.getByRole("switch", { name: "First Toggle" });
@@ -120,7 +120,7 @@ describe("Toggle Integration", () => {
         showText={true}
         icon="I"
         text="Toggle"
-      />
+      />,
     );
     toggle = screen.getByRole("switch");
     expect(toggle).toHaveTextContent("I");
@@ -167,7 +167,7 @@ describe("Toggle Integration", () => {
           text="Toggle"
         />
         <Toggle label="Empty Toggle" />
-      </div>
+      </div>,
     );
 
     const iconToggle = screen.getByRole("switch", { name: "Icon Toggle" });

tests/integration/ToggleGroup.integration.test.jsx

@@ -62,7 +62,7 @@ describe("ToggleGroup Integration", () => {
           </ToggleGroup>
         </div>
         <button type="submit">Submit</button>
-      </form>
+      </form>,
     );
 
     const submitButton = screen.getByRole("button", { name: "Submit" });
@@ -85,18 +85,22 @@ describe("ToggleGroup Integration", () => {
 
   it("handles dynamic prop changes", () => {
     const { rerender } = render(
-      <DynamicToggleGroup position="left" state="default" showText={true} />
+      <DynamicToggleGroup position="left" state="default" showText={true} />,
     );
 
     let toggleGroup = screen.getByRole("button");
     expect(toggleGroup).toHaveClass(
       "rounded-l-[var(--measures-radius-medium)]",
-      "rounded-r-none"
+      "rounded-r-none",
     );
     expect(toggleGroup).toHaveTextContent("Dynamic Content");
 
     rerender(
-      <DynamicToggleGroup position="middle" state="selected" showText={false} />
+      <DynamicToggleGroup
+        position="middle"
+        state="selected"
+        showText={false}
+      />,
     );
     toggleGroup = screen.getByRole("button");
     expect(toggleGroup).toHaveClass("rounded-none");
@@ -126,14 +130,14 @@ describe("ToggleGroup Integration", () => {
     fireEvent.click(toggleGroups[1]);
     await waitFor(() => {
       expect(toggleGroups[1]).toHaveClass(
-        "bg-[var(--color-magenta-magenta100)]"
+        "bg-[var(--color-magenta-magenta100)]",
       );
     });
   });
 
   it("handles content changes", () => {
     const { rerender } = render(
-      <ToggleGroup showText={true}>Initial Content</ToggleGroup>
+      <ToggleGroup showText={true}>Initial Content</ToggleGroup>,
     );
 
     let toggleGroup = screen.getByRole("button");
@@ -186,7 +190,7 @@ describe("ToggleGroup Integration", () => {
       fireEvent.click(toggleGroups[i % 3]);
       await waitFor(() => {
         expect(toggleGroups[i % 3]).toHaveClass(
-          "bg-[var(--color-magenta-magenta100)]"
+          "bg-[var(--color-magenta-magenta100)]",
         );
       });
     }
@@ -204,7 +208,7 @@ describe("ToggleGroup Integration", () => {
         <ToggleGroup position="right" showText={true}>
           Text Only
         </ToggleGroup>
-      </div>
+      </div>,
     );
 
     const toggleGroups = screen.getAllByRole("button");