Align props with figma

app/components/SelectOption/SelectOption.container.tsx

@@ -3,6 +3,7 @@
 import { forwardRef, memo, useCallback } from "react";
 import { SelectOptionView } from "./SelectOption.view";
 import type { SelectOptionProps } from "./SelectOption.types";
+import { normalizeContextMenuItemSize } from "../../../lib/propNormalization";
 
 const SelectOptionContainer = forwardRef<HTMLDivElement, SelectOptionProps>(
   (
@@ -12,11 +13,13 @@ const SelectOptionContainer = forwardRef<HTMLDivElement, SelectOptionProps>(
       disabled = false,
       className = "",
       onClick,
-      size = "medium",
+      size: sizeProp = "medium",
       ...props
     },
     ref,
   ) => {
+    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+    const size = normalizeContextMenuItemSize(sizeProp);
     const getTextSize = (): string => {
       switch (size) {
         case "small":

app/components/SelectOption/SelectOption.types.ts

@@ -1,3 +1,5 @@
+export type SelectOptionSizeValue = "small" | "medium" | "large" | "Small" | "Medium" | "Large";
+
 export interface SelectOptionProps {
   children?: React.ReactNode;
   selected?: boolean;
@@ -6,7 +8,11 @@ export interface SelectOptionProps {
   onClick?: (
     _e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
   ) => void;
-  size?: "small" | "medium" | "large";
+  /**
+   * Select option size. Accepts both lowercase and PascalCase (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  size?: SelectOptionSizeValue;
 }
 
 export interface SelectOptionViewProps {