Align props with figma

app/components/CheckboxGroup/CheckboxGroup.container.tsx

@@ -3,17 +3,20 @@
 import { memo, useCallback, useId, useState } from "react";
 import { CheckboxGroupView } from "./CheckboxGroup.view";
 import type { CheckboxGroupProps } from "./CheckboxGroup.types";
+import { normalizeMode } from "../../../lib/propNormalization";
 
 const CheckboxGroupContainer = ({
   name,
   value,
   onChange,
-  mode = "standard",
+  mode: modeProp = "standard",
   disabled = false,
   options = [],
   className = "",
   ...props
 }: CheckboxGroupProps) => {
+  // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+  const mode = normalizeMode(modeProp);
   // Generate unique ID for accessibility if not provided
   const generatedId = useId();
   const groupId = name || `checkbox-group-${generatedId}`;

app/components/CheckboxGroup/CheckboxGroup.types.ts

@@ -5,11 +5,17 @@ export interface CheckboxOption {
   ariaLabel?: string;
 }
 
+import type { ModeValue } from "../../../lib/propNormalization";
+
 export interface CheckboxGroupProps {
   name?: string;
   value?: string[];
   onChange?: (_data: { value: string[] }) => void;
-  mode?: "standard" | "inverse";
+  /**
+   * Mode variant. Accepts both "standard"/"Standard" and "inverse"/"Inverse" (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  mode?: ModeValue;
   disabled?: boolean;
   options?: CheckboxOption[];
   className?: string;