Fixes on create component tests

app/components-preview/page.tsx

@@ -9,7 +9,6 @@ import Progress from "../components/Progress";
 import Create from "../components/Create";
 import Input from "../components/Input";
 import InputWithCounter from "../components/InputWithCounter";
-import { getAssetPath } from "../../lib/assetUtils";
 
 export default function ComponentsPreview() {
   const [alertVisible, setAlertVisible] = useState({

app/components/ContentLockup/ContentLockup.container.tsx

@@ -99,6 +99,8 @@ const ContentLockupContainer = memo<ContentLockupProps>(
         titleContainer: "flex items-center justify-start w-full",
         title:
           "font-bricolage-grotesque font-bold text-[28px] leading-[36px] tracking-[0] text-[var(--color-content-default-primary)] text-left",
+        subtitle:
+          "font-inter font-normal text-[16px] leading-[24px] tracking-[0] text-[var(--color-content-default-tertiary)] text-left",
         description:
           "font-inter font-normal text-[16px] leading-[24px] tracking-[0] text-[var(--color-content-default-tertiary)] text-left",
         shape: "w-[16px] h-[16px]",

app/components/Create/Create.container.tsx

@@ -50,8 +50,7 @@ const CreateContainer = memo<CreateProps>(
       if (!isOpen) return;
 
       // Store previous active element
-      previousActiveElementRef.current =
+      previousActiveElementRef.current = document.activeElement as HTMLElement;
-        document.activeElement as HTMLElement;
 
       // Lock body scroll
       document.body.style.overflow = "hidden";
@@ -108,13 +107,13 @@ const CreateContainer = memo<CreateProps>(
       };
     }, [isOpen]);
 
-
     return (
       <CreateView
         isOpen={isOpen}
         onClose={onClose}
         title={title}
         description={description}
+        // eslint-disable-next-line react/no-children-prop
         children={children}
         footerContent={footerContent}
         showBackButton={showBackButton}

app/components/InputWithCounter/InputWithCounter.types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */
 export interface InputWithCounterProps {
   label?: string;
   placeholder?: string;
@@ -8,3 +9,4 @@ export interface InputWithCounterProps {
   className?: string;
   inputClassName?: string;
 }
+/* eslint-enable no-unused-vars, @typescript-eslint/no-unused-vars */

app/components/InputWithCounter/InputWithCounter.view.tsx

@@ -1,4 +1,3 @@
-import { getAssetPath } from "../../../lib/assetUtils";
 import type { InputWithCounterProps } from "./InputWithCounter.types";
 
 export function InputWithCounterView({

app/components/ModalFooter/ModalFooter.view.tsx

@@ -30,11 +30,7 @@ export function ModalFooterView({
       {/* Back Button - Absolutely positioned bottom left */}
       {showBackButton && (
         <div className="absolute left-[16px] top-[12px]">
-          <Button
+          <Button variant="outlined" size="medium" onClick={onBack}>
-            variant="outlined"
-            size="medium"
-            onClick={onBack}
-          >
             {defaultBackText}
           </Button>
         </div>

app/components/Stepper/Stepper.types.ts

@@ -1,4 +1,4 @@
-export type StepperActive = 1 | 2 | 3 | 4 | 5;
+export type StepperActive = number;
 
 export interface StepperProps {
   active?: StepperActive;

eslint.config.mjs

@@ -176,6 +176,14 @@ const eslintConfig = [
       "react-hooks/exhaustive-deps": "off",
     },
   },
+  // Type definition files - interface properties are used in implementation files
+  {
+    files: ["**/*.types.ts"],
+    rules: {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+    },
+  },
 ];
 
 export default eslintConfig;

stories/Create.stories.js

@@ -65,15 +65,10 @@ export const Default = Template.bind({});
 Default.args = {
   isOpen: true,
   title: "What do you call your group's new policy?",
-  description:
+  description: "You can also combine or add new approaches to the list",
-    "You can also combine or add new approaches to the list",
   children: (
     <div className="space-y-4">
-      <Input
+      <Input label="Label" placeholder="Policy name" value="" />
-        label="Label"
-        placeholder="Policy name"
-        value=""
-      />
       <p className="text-[12px] text-[var(--color-content-default-tertiary)]">
         0/48
       </p>
@@ -90,15 +85,10 @@ export const WithStepper = Template.bind({});
 WithStepper.args = {
   isOpen: true,
   title: "What do you call your group's new policy?",
-  description:
+  description: "You can also combine or add new approaches to the list",
-    "You can also combine or add new approaches to the list",
   children: (
     <div className="space-y-4">
-      <Input
+      <Input label="Label" placeholder="Policy name" value="" />
-        label="Label"
-        placeholder="Policy name"
-        value=""
-      />
       <p className="text-[12px] text-[var(--color-content-default-tertiary)]">
         0/48
       </p>
@@ -117,15 +107,10 @@ export const Step2 = Template.bind({});
 Step2.args = {
   isOpen: true,
   title: "How should conflicts be resolved?",
-  description:
+  description: "You can also combine or add new approaches to the list",
-    "You can also combine or add new approaches to the list",
   children: (
     <div className="space-y-4">
-      <Input
+      <Input label="Label" placeholder="Enter text" value="" />
-        label="Label"
-        placeholder="Enter text"
-        value=""
-      />
     </div>
   ),
   showBackButton: true,
@@ -178,15 +163,10 @@ export const NextButtonDisabled = Template.bind({});
 NextButtonDisabled.args = {
   isOpen: true,
   title: "What do you call your group's new policy?",
-  description:
+  description: "You can also combine or add new approaches to the list",
-    "You can also combine or add new approaches to the list",
   children: (
     <div className="space-y-4">
-      <Input
+      <Input label="Label" placeholder="Policy name" value="" />
-        label="Label"
-        placeholder="Policy name"
-        value=""
-      />
       <p className="text-[12px] text-[var(--color-content-default-tertiary)]">
         0/48
       </p>

tests/components/Create.test.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { screen, fireEvent, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom/vitest";
+import { renderWithProviders } from "../utils/test-utils";
 import Create from "../../app/components/Create";
 import Input from "../../app/components/Input";
 
@@ -20,20 +21,22 @@ describe("Create", () => {
   });
 
   it("renders when isOpen is true", () => {
-    render(<Create {...defaultProps}>Create dialog content</Create>);
+    renderWithProviders(
+      <Create {...defaultProps}>Create dialog content</Create>,
+    );
     expect(screen.getByRole("dialog")).toBeInTheDocument();
     expect(screen.getByText("Test Create Dialog")).toBeInTheDocument();
     expect(screen.getByText("Create dialog content")).toBeInTheDocument();
   });
 
   it("does not render when isOpen is false", () => {
-    render(<Create {...defaultProps} isOpen={false} />);
+    renderWithProviders(<Create {...defaultProps} isOpen={false} />);
     expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
   });
 
   it("calls onClose when close button is clicked", () => {
     const onClose = vi.fn();
-    render(<Create {...defaultProps} onClose={onClose} />);
+    renderWithProviders(<Create {...defaultProps} onClose={onClose} />);
     const closeButton = screen.getByLabelText("Close dialog");
     fireEvent.click(closeButton);
     expect(onClose).toHaveBeenCalledTimes(1);
@@ -41,14 +44,14 @@ describe("Create", () => {
 
   it("calls onClose when ESC key is pressed", () => {
     const onClose = vi.fn();
-    render(<Create {...defaultProps} onClose={onClose} />);
+    renderWithProviders(<Create {...defaultProps} onClose={onClose} />);
     fireEvent.keyDown(document, { key: "Escape" });
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
   it("calls onClose when overlay is clicked", () => {
     const onClose = vi.fn();
-    render(<Create {...defaultProps} onClose={onClose} />);
+    renderWithProviders(<Create {...defaultProps} onClose={onClose} />);
     const overlay = document.querySelector(".fixed.inset-0");
     if (overlay) {
       fireEvent.click(overlay);
@@ -59,7 +62,7 @@ describe("Create", () => {
   it("renders footer buttons when provided", () => {
     const onBack = vi.fn();
     const onNext = vi.fn();
-    render(
+    renderWithProviders(
       <Create
         {...defaultProps}
         showBackButton={true}
@@ -76,7 +79,7 @@ describe("Create", () => {
 
   it("calls onBack when back button is clicked", () => {
     const onBack = vi.fn();
-    render(
+    renderWithProviders(
       <Create
         {...defaultProps}
         showBackButton={true}
@@ -91,7 +94,7 @@ describe("Create", () => {
 
   it("calls onNext when next button is clicked", () => {
     const onNext = vi.fn();
-    render(
+    renderWithProviders(
       <Create
         {...defaultProps}
         showNextButton={true}
@@ -105,7 +108,7 @@ describe("Create", () => {
   });
 
   it("disables next button when nextButtonDisabled is true", () => {
-    render(
+    renderWithProviders(
       <Create
         {...defaultProps}
         showNextButton={true}
@@ -118,28 +121,20 @@ describe("Create", () => {
   });
 
   it("renders stepper when currentStep and totalSteps are provided", () => {
-    render(
+    renderWithProviders(
-      <Create
+      <Create {...defaultProps} currentStep={2} totalSteps={5} />,
-        {...defaultProps}
-        currentStep={2}
-        totalSteps={5}
-      />,
     );
-    const steppers = screen.getAllByRole("progressbar");
+    // Find the stepper by its aria-label
-    // Find the stepper in the footer (not the progress bar if any)
+    const stepper = screen.getByRole("progressbar", {
-    const footerStepper = steppers.find((stepper) => {
+      name: "Step 2 of 5",
-      const parent = stepper.closest(".absolute.bottom-0");
-      return parent !== null;
     });
-    expect(footerStepper).toBeInTheDocument();
+    expect(stepper).toBeInTheDocument();
-    if (footerStepper) {
+    expect(stepper).toHaveAttribute("aria-valuenow", "2");
-      expect(footerStepper).toHaveAttribute("aria-valuenow", "2");
+    expect(stepper).toHaveAttribute("aria-valuemax", "5");
-      expect(footerStepper).toHaveAttribute("aria-valuemax", "5");
-    }
   });
 
   it("renders custom footer content", () => {
-    render(
+    renderWithProviders(
       <Create
         {...defaultProps}
         footerContent={<button>Custom Footer</button>}
@@ -149,33 +144,35 @@ describe("Create", () => {
   });
 
   it("has proper ARIA attributes", () => {
-    render(<Create {...defaultProps} ariaLabel="Test create dialog" />);
+    renderWithProviders(
+      <Create {...defaultProps} ariaLabel="Test create dialog" />,
+    );
     const dialog = screen.getByRole("dialog");
     expect(dialog).toHaveAttribute("aria-modal", "true");
     expect(dialog).toHaveAttribute("aria-label", "Test create dialog");
   });
 
   it("locks body scroll when open", () => {
-    render(<Create {...defaultProps} />);
+    renderWithProviders(<Create {...defaultProps} />);
     expect(document.body.style.overflow).toBe("hidden");
   });
 
   it("restores body scroll when closed", () => {
-    const { rerender } = render(<Create {...defaultProps} />);
+    const { rerender } = renderWithProviders(<Create {...defaultProps} />);
     expect(document.body.style.overflow).toBe("hidden");
     rerender(<Create {...defaultProps} isOpen={false} />);
     expect(document.body.style.overflow).toBe("");
   });
 
   it("traps focus within create dialog", async () => {
-    render(
+    renderWithProviders(
       <Create {...defaultProps}>
         <Input label="Test Input" />
       </Create>,
     );
 
     const closeButton = screen.getByLabelText("Close dialog");
-    const input = screen.getByLabelText("Test Input");
+    screen.getByLabelText("Test Input"); // Verify input is rendered
 
     // Focus should start on first focusable element (close button)
     await waitFor(() => {