Add character counter to textfield

# Text Field Character Count

## Overview

An enhancement to the existing `TextField` component to provide real-time feedback to users about how many characters they have entered. It displays the remaining character count and updates live as users type, helping them stay within specified limits.

### Problem Statement

The character count component addresses several key problems:

- Communicate up-front boundaries: Users may not know character limits exist until they submit a form and receive an error, leading to form abandonment
- Accessibility: Provides necessary feedback for screen reader users about input constraints
- Enhanced UX: Reduces cognitive load by providing real-time feedback rather than post-submission errors

## Component Design

### Visual Design

> [!Note]
> This component is still in the early experimental stages in Figma. Once these figma designs are complete, this story will need to be updated to include that work.

### Interface / Props

```ts
interface TextFieldWithCharacterCountProps extends TextFieldProps {
/** Maximum character length */
maxLength: number;
/** Show character count */
showCharacterCount?: boolean;
/** Character count label */
characterCountLabel?: (remainingCharacters: number) => string
}
```

### Accessibility

Accommodations for both sighted and users who use assistive technology need to be considered:

If the counter itself is included in a live region, announcing regular status updates would be overly intrusive as the updates may occur frequently as the user types within the text field. Unfortunately there's not a single solution that overlaps to address both sets of issues holistically so distinct implementations will be needed to address both cases separately.

**For sighted users:**

Provide a clear visual indication (with the character count) to indicate any status updates or remaining/overage of characters.

**For AT users:**

Care should be taken to ensure frequent updates are not overly verbose. The recommended approach would be to include status updates in an `aria-live` that gets updated after 2000ms delay. This ensures the updates are not overly verbose, but that the any updates do get announced once the user has paused their typing.

When the max character length is reached, the announcement for reaching that boundary should be announced immediately and not on delay. Character overages should still be announced on a delay.

### Responsiveness

The count should wrap appropriately when on smaller viewport sizes and readability should still be maintained down to 320px.

### Interactive States (optional)

No special interactive states are needed for this implementation.

### Usage Examples

```tsx

```

### Referencing Implementations

- [Gov.uk character count](https://design-system.service.gov.uk/components/character-count/)
- [USWDS character count](https://designsystem.digital.gov/components/character-count/)
- [Polaris React text field](https://polaris-react.shopify.com/components/selection-and-input/text-field?example=text-field-with-character-count)