Align props with figma

app/components/SelectInput/SelectInput.container.tsx

@@ -16,13 +16,16 @@ import React, {
 import { useClickOutside } from "../../hooks";
 import { SelectInputView } from "./SelectInput.view";
 import type { SelectInputProps } from "./SelectInput.types";
+import { normalizeState, normalizeSmallMediumLargeSize, normalizeLabelVariant } from "../../../lib/propNormalization";
 
 const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
   (
     {
       id,
       label,
-      state: externalState = "default",
+      labelVariant: labelVariantProp,
+      size: sizeProp,
+      state: externalStateProp = "default",
       disabled = false,
       error = false,
       placeholder = "Choose an option",
@@ -35,6 +38,11 @@ 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;
+    const externalState = normalizeState(externalStateProp);
+    
     const generatedId = useId();
     const selectId = id || `select-input-${generatedId}`;
     const labelId = `${selectId}-label`;

app/components/SelectInput/SelectInput.types.ts

@@ -5,12 +5,29 @@ export interface SelectOptionData {
   label: string;
 }
 
+import type { StateValue } from "../../../lib/propNormalization";
+
+export type SelectInputLabelVariantValue = "default" | "horizontal" | "Default" | "Horizontal";
+export type SelectInputSizeValue = "small" | "medium" | "large" | "Small" | "Medium" | "Large";
+
 export interface SelectInputProps {
   id?: string;
   label?: string;
-  labelVariant?: "default" | "horizontal";
-  size?: "small" | "medium" | "large";
-  state?: "default" | "hover" | "focus";
+  /**
+   * Label variant. Accepts both lowercase and PascalCase (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  labelVariant?: SelectInputLabelVariantValue;
+  /**
+   * Select input size. Accepts both lowercase and PascalCase (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  size?: SelectInputSizeValue;
+  /**
+   * Visual state. Accepts "default"/"Default", "hover"/"Hover", "focus"/"Focus" (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  state?: StateValue;
   disabled?: boolean;
   error?: boolean;
   placeholder?: string;