Informational and text templates

app/components/controls/TextInput/TextInput.container.tsx

@@ -4,12 +4,13 @@ import { memo, forwardRef, useState, useRef } from "react";
 import { useComponentId, useFormField } from "../../../hooks";
 import { TextInputView } from "./TextInput.view";
 import type { TextInputProps } from "./TextInput.types";
-import { normalizeInputState } from "../../../../lib/propNormalization";
+import { normalizeInputState, normalizeTextInputSize } from "../../../../lib/propNormalization";
 
 const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
   (
     {
       state: externalStateProp = "default",
+      inputSize: inputSizeProp = "medium",
       disabled = false,
       error = false,
       label,
@@ -31,6 +32,7 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
   ) => {
     // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
     const externalState = normalizeInputState(externalStateProp);
+    const inputSize = normalizeTextInputSize(inputSizeProp);
     
     // Generate unique ID for accessibility if not provided
     const { id: inputId, labelId } = useComponentId("text-input", id);
@@ -59,13 +61,20 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
     // Determine if input is filled (has value)
     const isFilled = Boolean(value && value.trim().length > 0);
 
-    // Fixed size styles (medium only per Figma designs)
-    const sizeStyles = {
-      input: "h-[40px] px-[12px] py-[8px] text-[16px]",
-      label: "text-[14px] leading-[20px] font-medium",
-      container: "gap-[8px]",
-      radius: "var(--measures-radius-200,8px)",
-    };
+    // Size styles based on inputSize prop
+    const sizeStyles = inputSize === "small"
+      ? {
+          input: "h-[32px] px-[10px] py-[6px] text-[14px]",
+          label: "text-[12px] leading-[16px] font-medium",
+          container: "gap-[6px]",
+          radius: "var(--measures-radius-200,8px)",
+        }
+      : {
+          input: "h-[40px] px-[12px] py-[8px] text-[16px]",
+          label: "text-[14px] leading-[20px] font-medium",
+          container: "gap-[8px]",
+          radius: "var(--measures-radius-200,8px)",
+        };
 
     // State styles based on Figma designs
     const getStateStyles = (): {