<!-- source-hash: 07edf12b9aece7d3d65330a955505e1f -->
Storybook stories for the `Input` UI component, demonstrating all supported variants, adornments, states, and compositions.

## Key Components

| Export | Description |
|--------|-------------|
| `Default` | Basic input with placeholder text |
| `WithEndAdornmentText` | Input with trailing text label (e.g., "Seconds") |
| `WithStartAdornmentIcon` | Input with leading icon/emoji |
| `WithBothAdornments` | Input with both start and end adornments (e.g., currency) |
| `DisabledWithAdornments` | Disabled state with adornments |
| `InvalidWithAdornments` | Error/invalid state with adornments |
| `WithLabel` | Input with a visible label |
| `WithLabelAndError` | Input with label and validation error message |
| `SearchInput` | Controlled input with `SearchIcon` start adornment |
| `Loading` | Input with loading spinner state |
| `WithButton` | Input paired with a submit `Button` |
| `AllVariants` | Side-by-side showcase of all input states |

## Usage Example

```typescript
// Basic input
<Input placeholder="Enter text..." />

// With adornments
<Input
  placeholder="0.00"
  startAdornment="$"
  endAdornment="USD"
/>

// With label and error
<Input
  label="Username"
  placeholder="Enter text..."
  error="This field is required"
/>

// Controlled search input with icon
const [value, setValue] = useState('');
<Input
  value={value}
  onChange={(e) => setValue(e.target.value)}
  placeholder="Search..."
  startAdornment={<SearchIcon size={20} />}
/>

// Disabled state
<Input placeholder="90" endAdornment="Seconds" disabled />

// Loading state
<Input placeholder="Searching..." loading={true} startAdornment={<SearchIcon size={20} />} />
```