Storybook stories for the `PasswordResetForm` component, demonstrating the full-page password reset flow inside `AuthShell` with two controlled states: empty fields and pre-filled matching passwords. ## Key Components - **`PasswordResetPage`** — Internal render helper that wires up controlled state (`password`, `confirmPassword`) and derives `isValid` / inline error logic for the stories - **`Empty`** — Story showing the form with empty fields and submit disabled - **`Filled`** — Story showing the form with matching passwords pre-populated and submit enabled ## Usage Example ```typescript // Minimal controlled usage matching the story pattern import { AuthShell, BackToLoginLink, PasswordResetForm } from '../../components/features/auth' import { useState } from 'react' function PasswordResetPage() { const [password, setPassword] = useState('') const [confirmPassword, setConfirmPassword] = useState('') const isValid = password.length >= 8 && password === confirmPassword return ( {}} />}> {}} onCancel={() => {}} onBackToLogin={() => {}} submitDisabled={!isValid} errors={{ confirmPassword: confirmPassword && password !== confirmPassword ? 'Passwords do not match' : undefined, }} /> ) } ``` **Validation logic:** - Submit is enabled only when `password.length >= 8` and both fields match - `confirmPassword` error is shown only after the user has typed in the confirm field and it diverges from `password` **Source:** [`PasswordReset.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/PasswordReset.stories.tsx)