app/components/CheckboxGroup/CheckboxGroup.container.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useCallback, useId, useState, useEffect } from "react";
+import { memo, useCallback, useId, useState } from "react";
 import { CheckboxGroupView } from "./CheckboxGroup.view";
 import type { CheckboxGroupProps } from "./CheckboxGroup.types";
 
@@ -18,15 +18,11 @@ const CheckboxGroupContainer = ({
   const generatedId = useId();
   const groupId = name || `checkbox-group-${generatedId}`;
 
-  // Internal state to track checked values
-  const [checkedValues, setCheckedValues] = useState<string[]>(value || []);
-
-  // Sync internal state with external value prop
-  useEffect(() => {
-    if (value !== undefined) {
-      setCheckedValues(value);
-    }
-  }, [value]);
+  // Internal state to track checked values (only used if value prop is not provided)
+  const [internalCheckedValues, setInternalCheckedValues] = useState<string[]>([]);
+  
+  // Use controlled value if provided, otherwise use internal state
+  const checkedValues = value !== undefined ? value : internalCheckedValues;
 
   const handleOptionChange = useCallback(
     (optionValue: string, checked: boolean) => {
@@ -36,13 +32,16 @@ const CheckboxGroupContainer = ({
         ? [...checkedValues, optionValue]
         : checkedValues.filter((v) => v !== optionValue);
 
-      setCheckedValues(newCheckedValues);
+      // Only update internal state if uncontrolled
+      if (value === undefined) {
+        setInternalCheckedValues(newCheckedValues);
+      }
 
       if (onChange) {
         onChange({ value: newCheckedValues });
       }
     },
-    [disabled, checkedValues, onChange],
+    [disabled, checkedValues, onChange, value],
   );
 
   return (

app/components/RadioButton/RadioButton.container.tsx

@@ -16,7 +16,6 @@ const RadioButtonContainer = ({
   value,
   ariaLabel,
   className = "",
-  ...props
 }: RadioButtonProps) => {
   const isInverse = mode === "inverse";
   const isStandard = mode === "standard";
@@ -82,23 +81,6 @@ const RadioButtonContainer = ({
 
   const combinedBoxStyles = getBoxStyles();
 
-  // Dot color per Figma
-  // Selected state: light cream/yellow (#fefcc9)
-  // Selected hover state: darker yellow/brown (#333000 or rgba(51, 48, 0, 1))
-  const getDotColor = (): string => {
-    if (!checked) return "transparent";
-    
-    if (isStandard) {
-      // Use CSS to handle hover state - default is light cream, hover is darker
-      return "var(--color-content-default-brand-primary, #fefcc9)";
-    }
-    
-    // Inverse mode: black dot
-    return "var(--color-content-default-primary, #000000)";
-  };
-
-  const dotColor = getDotColor();
-
   // Label color
   const labelColor = isInverse
     ? "var(--color-content-inverse-primary)"
@@ -139,7 +121,6 @@ const RadioButtonContainer = ({
       ariaLabel={ariaLabel}
       className={className}
       combinedBoxStyles={combinedBoxStyles}
-      dotColor={dotColor}
       labelColor={labelColor}
       onToggle={handleToggle}
       onKeyDown={handleKeyDown}

app/components/RadioButton/RadioButton.types.ts

@@ -24,7 +24,6 @@ export interface RadioButtonViewProps {
   ariaLabel?: string;
   className: string;
   combinedBoxStyles: string;
-  dotColor: string;
   labelColor: string;
   onToggle: (_e: React.MouseEvent | React.KeyboardEvent) => void;
   onKeyDown: (_e: React.KeyboardEvent<HTMLSpanElement>) => void;

app/components/RadioButton/RadioButton.view.tsx

@@ -11,7 +11,6 @@ export function RadioButtonView({
   ariaLabel,
   className,
   combinedBoxStyles,
-  dotColor,
   labelColor,
   onToggle,
   onKeyDown,

app/components/SelectInput/SelectInput.view.tsx

@@ -59,7 +59,6 @@ export function SelectInputView({
   menuRef,
   ariaLabelledby,
   ariaInvalid,
-  ...props
 }: SelectInputViewProps) {
   // Styles based on Figma design
   const containerClasses = "flex flex-col gap-[8px]";

stories/Create.stories.js

@@ -99,7 +99,7 @@ Step2.args = {
   description: "You can also combine or add new approaches to the list",
   children: (
     <div className="space-y-4">
-      <Input label="Label" placeholder="Enter text" value="" />
+      <TextInput label="Label" placeholder="Enter text" value="" />
     </div>
   ),
   showBackButton: true,

tests/unit/NumberCard.test.jsx

@@ -188,9 +188,10 @@ describe("NumberCard Component", () => {
   it("applies Small size variant correctly", () => {
     render(<NumberCard {...defaultProps} size="Small" />);
 
+    // For Small size, text is directly in card div (no wrapper), so use closest("div")
     const card = screen
       .getByText("Test Card Text")
-      .closest("div").parentElement;
+      .closest("div");
     expect(card).toHaveClass(
       "flex",
       "flex-col",
@@ -198,6 +199,7 @@ describe("NumberCard Component", () => {
       "justify-center",
       "gap-4",
       "p-5",
+      "relative",
     );
 
     const textElement = screen.getByText("Test Card Text");