feat: TASK-21816 withdraw on a URL-backed stepper + TASK-21454 Field

e2e/shots/fixtures.spec.ts

@@ -110,7 +110,9 @@ for (const [name, fixture] of Object.entries(FIXTURES)) {
         await page.clock.setFixedTime(FROZEN_NOW)
         await page.addInitScript(seenOnceModals)
 
-        await page.goto(`${fixture.route}?${FIXTURE_PARAM}=${name}`, { waitUntil: 'domcontentloaded' })
+        // A fixture route may carry its own query (deep-linked flow steps).
+        const sep = fixture.route.includes('?') ? '&' : '?'
+        await page.goto(`${fixture.route}${sep}${FIXTURE_PARAM}=${name}`, { waitUntil: 'domcontentloaded' })
         await settle(page)
 
         // A build without NEXT_PUBLIC_VERCEL_ENV=preview ignores the param and

src/app/(mobile-ui)/dev/ds/_components/nav-config.ts

@@ -77,6 +77,13 @@ export const SIDEBAR_CONFIG: Record<string, NavItem[]> = {
             description: 'Inline field-level error (Body/XS, foreground-error) — flow errors stay Notification',
             status: 'production',
         },
+        {
+            label: 'Field',
+            icon: 'docs',
+            href: '/dev/ds/primitives/field',
+            description: 'Form-field chrome: label + control + helper/error line — error is text only, never borders',
+            status: 'production',
+        },
         {
             label: 'BaseSelect',
             icon: 'clip',

src/app/(mobile-ui)/dev/ds/primitives/field/page.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { useState } from 'react'
+import { BaseInput } from '@/components/0_Bruddle/BaseInput'
+import { Field } from '@/components/0_Bruddle/Field'
+import { DocHeader } from '../../_components/DocHeader'
+import { DocSection } from '../../_components/DocSection'
+import { DocPage } from '../../_components/DocPage'
+import { CodeBlock } from '../../_components/CodeBlock'
+
+export default function FieldPage() {
+    const [bic, setBic] = useState('NOTABIC')
+    const bicInvalid = bic.length > 0 && bic.length !== 8 && bic.length !== 11
+
+    return (
+        <DocPage>
+            <DocHeader
+                title="Field"
+                description="Form-field chrome from the form board (17802:61539): label + control + one helper/error line, gap 4. The error is text only and replaces the helper — Field never paints error borders. react-hook-form owns the state; wrap the control in a Controller."
+                status="production"
+            />
+
+            <DocSection title="Label + helper">
+                <DocSection.Content>
+                    <Field label="IBAN" htmlFor="ds-field-iban" helper="The account you withdraw to.">
+                        <BaseInput id="ds-field-iban" placeholder="DE89 3704 0044 0532 0130 00" />
+                    </Field>
+                </DocSection.Content>
+                <DocSection.Code>
+                    <CodeBlock
+                        label="Field"
+                        code={`import { Field } from '@/components/0_Bruddle/Field'
+
+<Field label="IBAN" htmlFor="iban" helper="The account you withdraw to.">
+    <BaseInput id="iban" ... />
+</Field>`}
+                    />
+                </DocSection.Code>
+            </DocSection>
+
+            <DocSection title="Error replaces helper (text only, no borders)">
+                <DocSection.Content>
+                    <Field
+                        label="BIC"
+                        htmlFor="ds-field-bic"
+                        helper="8 or 11 characters"
+                        error={bicInvalid ? 'A BIC has 8 or 11 characters.' : undefined}
+                    >
+                        <BaseInput id="ds-field-bic" value={bic} onChange={(e) => setBic(e.target.value)} />
+                    </Field>
+                </DocSection.Content>
+                <DocSection.Code>
+                    <CodeBlock
+                        label="With react-hook-form"
+                        code={`<Controller
+    name="bic"
+    control={control}
+    rules={{ validate: ... }}
+    render={({ field, fieldState }) => (
+        <Field label="BIC" htmlFor="bic" error={fieldState.error?.message}>
+            <BaseInput id="bic" {...field} />
+        </Field>
+    )}
+/>`}
+                    />
+                </DocSection.Code>
+            </DocSection>
+        </DocPage>
+    )
+}

src/app/(mobile-ui)/recover-funds/page.tsx

@@ -13,7 +13,7 @@ import { fetchWalletBalances } from '@/services/tokens-price'
 import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants/zerodev.consts'
 import { nativeCurrencyAddresses } from '@/constants/general.consts'
 import { areEvmAddressesEqual, isTxReverted, getExplorerUrl, getChainName, getTokenLogo } from '@/utils/general.utils'
-import { type RecipientState } from '@/context/WithdrawFlowContext'
+import { type RecipientState } from '@/components/Global/GeneralRecipientInput/types'
 import GeneralRecipientInput, { type GeneralRecipientUpdate } from '@/components/Global/GeneralRecipientInput'
 import { Button } from '@/components/0_Bruddle/Button'
 import Card from '@/components/Global/Card'