Resolve test errors

app/components/NumberCard.tsx

@@ -28,14 +28,14 @@ interface NumberCardProps {
 }
 
 const NumberCard = memo<NumberCardProps>(({ number, text, size: sizeProp }) => {
-  // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-  const size = normalizeNumberCardSize(sizeProp);
   // Base classes common to all sizes
   const baseClasses = "bg-[var(--color-surface-inverse-primary)] rounded-[12px] shadow-lg";
 
   // If size prop is provided, use explicit size classes
   // Otherwise, use responsive breakpoints for backward compatibility
-  if (size) {
+  if (sizeProp) {
+    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+    const size = normalizeNumberCardSize(sizeProp);
     // Size-specific classes
     const sizeClasses = {
       Small: "flex flex-col items-end justify-center gap-4 p-5 relative",

app/components/RadioButton/RadioButton.container.tsx

@@ -9,7 +9,7 @@ const RadioButtonContainer = ({
   checked = false,
   mode: modeProp = "standard",
   state: stateProp = "default", // This state prop is now only for static display in Storybook/Preview
-  indicator = true, // From Figma: whether to show the indicator dot
+  indicator: _indicator = true, // From Figma: whether to show the indicator dot (currently not used in view)
   disabled = false,
   label,
   onChange,

app/components/SelectInput/SelectInput.container.tsx

@@ -39,8 +39,9 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
     ref,
   ) => {
     // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const labelVariant = labelVariantProp ? normalizeLabelVariant(labelVariantProp) : undefined;
-    const size = sizeProp ? normalizeSmallMediumLargeSize(sizeProp) : undefined;
+    // Note: labelVariant and size are normalized for future use but not yet implemented in the view
+    const _labelVariant = labelVariantProp ? normalizeLabelVariant(labelVariantProp) : undefined;
+    const _size = sizeProp ? normalizeSmallMediumLargeSize(sizeProp) : undefined;
     const externalState = normalizeState(externalStateProp);
     
     const generatedId = useId();

tests/unit/ContentContainer.test.jsx

@@ -85,14 +85,14 @@ describe("ContentContainer", () => {
   });
 
   it("applies correct width when specified", () => {
-    render(<ContentContainer post={mockPost} width="300px" size="sm" />);
+    render(<ContentContainer post={mockPost} width="300px" size="xs" />);
 
     const container = document.querySelector("div[class*='relative z-20']");
     expect(container).toHaveStyle("width: 300px");
   });
 
   it("applies default width when not specified", () => {
-    render(<ContentContainer post={mockPost} size="sm" />);
+    render(<ContentContainer post={mockPost} size="xs" />);
 
     const container = document.querySelector("div[class*='relative z-20']");
     expect(container).toHaveStyle("width: 200px");
@@ -183,8 +183,8 @@ describe("ContentContainer", () => {
     expect(screen.getByText("Incomplete Post")).toBeInTheDocument();
   });
 
-  it("applies correct responsive sizing for sm breakpoint", () => {
-    render(<ContentContainer post={mockPost} size="sm" />);
+  it("applies correct responsive sizing for xs breakpoint", () => {
+    render(<ContentContainer post={mockPost} size="xs" />);
 
     const icon = screen.getByAltText("Icon for Test Article Title");
     expect(icon).toHaveClass("w-[60px]", "h-[30px]");
@@ -196,8 +196,8 @@ describe("ContentContainer", () => {
     expect(description).toHaveClass("text-[12px]", "leading-[16px]");
   });
 
-  it("applies correct responsive sizing for md breakpoint", () => {
-    render(<ContentContainer post={mockPost} size="md" />);
+  it("applies correct responsive sizing for responsive breakpoint", () => {
+    render(<ContentContainer post={mockPost} size="responsive" />);
 
     const icon = screen.getByAltText("Icon for Test Article Title");
     expect(icon).toHaveClass("w-[60px]", "h-[30px]");

tests/unit/NumberCard.test.jsx

@@ -39,7 +39,7 @@ describe("NumberCard Component", () => {
     const card = screen
       .getByText("Test Card Text")
       .closest("div").parentElement;
-    expect(card).toHaveClass("flex", "flex-col", "sm:flex-row", "lg:flex-col");
+    expect(card).toHaveClass("flex", "flex-col", "sm:flex-row", "sm:items-center", "lg:flex-col", "lg:items-start", "lg:justify-end", "lg:relative");
   });
 
   it("applies proper responsive spacing when size is not specified", () => {
@@ -66,7 +66,7 @@ describe("NumberCard Component", () => {
     const card = screen
       .getByText("Test Card Text")
       .closest("div").parentElement;
-    expect(card).toHaveClass("lg:h-[238px]");
+    expect(card).toHaveClass("lg:h-[238px]", "lg:relative");
   });
 
   it("applies proper background and shadow", () => {
@@ -128,8 +128,11 @@ describe("NumberCard Component", () => {
     expect(textElement).toHaveClass(
       "text-[24px]",
       "sm:text-[24px]",
+      "sm:leading-[24px]",
       "lg:text-[24px]",
+      "lg:leading-[24px]",
       "xl:text-[32px]",
+      "xl:leading-[32px]",
     );
   });
 
@@ -156,7 +159,7 @@ describe("NumberCard Component", () => {
       .closest("div").parentElement;
 
     // Mobile first approach
-    expect(card).toHaveClass("flex-col", "gap-4", "p-5");
+    expect(card).toHaveClass("flex", "flex-col", "gap-4", "p-5");
 
     // Small breakpoint
     expect(card).toHaveClass(
@@ -172,7 +175,9 @@ describe("NumberCard Component", () => {
       "lg:gap-[22px]",
       "lg:p-8",
       "lg:items-start",
+      "lg:justify-end",
       "lg:relative",
+      "lg:h-[238px]",
     );
   });