@insymetri/styleguide 0.1.26 → 0.1.28

package/dist/MobileOnboarding/LoginFlowBareAlt.svelte

@@ -0,0 +1,968 @@
+<script lang="ts">
+	import {onMount} from 'svelte'
+	import DensityProvider from '../DensityProvider/DensityProvider.svelte'
+	import IIInput from '../IIInput/IIInput.svelte'
+	import IIButton from '../IIButton/IIButton.svelte'
+	import IIAlert from '../IIAlert/IIAlert.svelte'
+	import IIDateInput from '../IIDateInput/IIDateInput.svelte'
+	import IIDropdownInput from '../IIDropdownInput/IIDropdownInput.svelte'
+	import IISwitch from '../IISwitch/IISwitch.svelte'
+	import IISegmentedControl from '../IISegmentedControl/IISegmentedControl.svelte'
+
+	// --- Flow state ---
+	type Step = 'email' | 'otp' | 'profile' | 'about' | 'financial' | 'review'
+	let step: Step = $state('email')
+	let transitioning = $state(false)
+	const FADE_DURATION = 200
+
+	function handleFocusIn(e: FocusEvent) {
+		const t = e.target as HTMLElement
+		if (t.tagName === 'INPUT' || t.tagName === 'SELECT' || t.tagName === 'BUTTON') {
+			setTimeout(() => t.scrollIntoView({block: 'center', behavior: 'smooth'}), 100)
+		}
+	}
+
+	function handleFocusTrap(e: KeyboardEvent) {
+		if (e.key !== 'Tab') return
+		const container = e.currentTarget as HTMLElement
+		const focusable = container.querySelectorAll<HTMLElement>(
+			'input:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+		)
+		if (focusable.length === 0) return
+		const first = focusable[0]
+		const last = focusable[focusable.length - 1]
+		if (e.shiftKey && document.activeElement === first) {
+			e.preventDefault()
+			last.focus()
+		} else if (!e.shiftKey && document.activeElement === last) {
+			e.preventDefault()
+			first.focus()
+		}
+	}
+
+	function transitionTo(newStep: Step) {
+		transitioning = true
+		formScrolled = false
+		setTimeout(() => {
+			step = newStep
+			transitioning = false
+		}, FADE_DURATION)
+	}
+
+	// --- Email state ---
+	let email = $state('')
+	let emailError = $state('')
+	let emailLoading = $state(false)
+
+	// --- OTP state ---
+	let digits = $state<string[]>(['', '', '', '', '', ''])
+	let inputs: HTMLInputElement[] = []
+	let otpError = $state('')
+	let verifying = $state(false)
+	let isResending = $state(false)
+
+	let deliveryStatus = $state<'idle' | 'sending' | 'sent' | 'delivered' | 'bounced' | 'failed'>('delivered')
+	let deliveryError = $state('')
+
+	const code = $derived(digits.join(''))
+	const isComplete = $derived(code.length === 6 && digits.every((d) => d !== ''))
+	const hasFailed = $derived(deliveryStatus === 'bounced' || deliveryStatus === 'failed')
+	const sentComplete = $derived(deliveryStatus !== 'idle')
+	const deliveredComplete = $derived(deliveryStatus === 'delivered')
+	const isInFlight = $derived(deliveryStatus === 'sent' || deliveryStatus === 'sending')
+
+	function handleOtpInput(index: number, event: Event) {
+		const target = event.target as HTMLInputElement
+		const val = target.value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase()
+		digits[index] = val.slice(-1)
+		target.value = digits[index]
+		if (digits[index] && index < 5) {
+			inputs[index + 1]?.focus()
+		}
+	}
+
+	function handleOtpKeydown(index: number, event: KeyboardEvent) {
+		if (event.key === 'Backspace' && !digits[index] && index > 0) {
+			inputs[index - 1]?.focus()
+		}
+	}
+
+	function handleOtpPaste(event: ClipboardEvent) {
+		event.preventDefault()
+		const paste = event.clipboardData
+			?.getData('text')
+			?.replace(/[^a-zA-Z0-9]/g, '')
+			?.toUpperCase()
+			?.slice(0, 6)
+		if (paste) {
+			for (let i = 0; i < 6; i++) {
+				digits[i] = paste[i] || ''
+			}
+			const nextEmpty = paste.length < 6 ? paste.length : 5
+			inputs[nextEmpty]?.focus()
+		}
+	}
+
+	// --- Profile state ---
+	let firstName = $state('')
+	let lastName = $state('')
+	let dob = $state<any>(undefined)
+	let phone = $state('')
+	let accountUpdates = $state(true)
+	let promotional = $state(true)
+	let streetAddress = $state('')
+	let city = $state('')
+	let stateValue = $state<string | undefined>(undefined)
+	let zip = $state('')
+	let formScrolled = $state(false)
+
+	// --- About You state ---
+	let loanAmount = $state('')
+	let bestTimeToCall = $state<string | undefined>(undefined)
+	let ssn = $state('')
+	let idType = $state('dl')
+	let idNumber = $state('')
+	let issuingState = $state<string | undefined>(undefined)
+	let militaryStatus = $state<string | undefined>(undefined)
+	let timeAtAddress = $state<string | undefined>(undefined)
+	let ownOrRent = $state('rent')
+
+	// --- Financial state ---
+	let incomeType = $state<string | undefined>(undefined)
+	let annualIncome = $state('')
+	let payFrequency = $state('biweekly')
+	let payType = $state('direct-deposit')
+	let bankName = $state('')
+	let routingNumber = $state('')
+	let accountNumber = $state('')
+	let accountType = $state('checking')
+	let accountAge = $state<string | undefined>(undefined)
+
+	const CALL_TIMES = [
+		{value: 'morning', label: 'Morning (8am-12pm)'}, {value: 'afternoon', label: 'Afternoon (12pm-5pm)'},
+		{value: 'evening', label: 'Evening (5pm-8pm)'}, {value: 'anytime', label: 'Anytime'},
+	]
+	const ID_TYPES = [{value: 'dl', label: "Driver's License"}, {value: 'stId', label: "State ID"}]
+	const MILITARY_OPTIONS = [
+		{value: 'no', label: 'No Military Affiliation'}, {value: 'active-duty', label: 'Active Duty Military'},
+		{value: 'veteran', label: 'Veteran'}, {value: 'dependent', label: 'Military Dependent'},
+	]
+	const TIME_AT_ADDRESS = [
+		{value: 'less-than-1-year', label: 'Less than 1 year'}, {value: '1-2-years', label: '1-2 years'},
+		{value: '2-5-years', label: '2-5 years'}, {value: '5-10-years', label: '5-10 years'},
+		{value: 'more-than-10-years', label: 'More than 10 years'},
+	]
+	const OWN_RENT = [{value: 'rent', label: 'Rent'}, {value: 'own', label: 'Own'}, {value: 'other', label: 'Other'}]
+	const INCOME_TYPES = [
+		{value: 'employment', label: 'Employment'}, {value: 'self-employed', label: 'Self-Employed'},
+		{value: 'social-security', label: 'Social Security'}, {value: 'disability', label: 'Disability'},
+		{value: 'retirement', label: 'Retirement'}, {value: 'other', label: 'Other'},
+	]
+	const PAY_FREQUENCIES = [
+		{value: 'biweekly', label: 'Bi-wk'}, {value: 'weekly', label: 'Wk'},
+		{value: 'half-month', label: '2x/mo'}, {value: 'monthly', label: 'Mo'},
+	]
+	const PAY_TYPES = [{value: 'direct-deposit', label: 'Direct Dep.'}, {value: 'check', label: 'Check'}, {value: 'cash', label: 'Cash'}]
+	const ACCOUNT_TYPES = [{value: 'checking', label: 'Checking'}, {value: 'savings', label: 'Savings'}]
+	const ACCOUNT_AGES = [
+		{value: 'less-than-6-months', label: 'Less than 6 months'}, {value: '6-12-months', label: '6-12 months'},
+		{value: '1-2-years', label: '1-2 years'}, {value: '2-5-years', label: '2-5 years'},
+		{value: 'more-than-5-years', label: 'More than 5 years'},
+	]
+
+	const US_STATES = [
+		{value: 'AL', label: 'Alabama'}, {value: 'AK', label: 'Alaska'}, {value: 'AZ', label: 'Arizona'},
+		{value: 'AR', label: 'Arkansas'}, {value: 'CA', label: 'California'}, {value: 'CO', label: 'Colorado'},
+		{value: 'CT', label: 'Connecticut'}, {value: 'DE', label: 'Delaware'}, {value: 'FL', label: 'Florida'},
+		{value: 'GA', label: 'Georgia'}, {value: 'HI', label: 'Hawaii'}, {value: 'ID', label: 'Idaho'},
+		{value: 'IL', label: 'Illinois'}, {value: 'IN', label: 'Indiana'}, {value: 'IA', label: 'Iowa'},
+		{value: 'KS', label: 'Kansas'}, {value: 'KY', label: 'Kentucky'}, {value: 'LA', label: 'Louisiana'},
+		{value: 'ME', label: 'Maine'}, {value: 'MD', label: 'Maryland'}, {value: 'MA', label: 'Massachusetts'},
+		{value: 'MI', label: 'Michigan'}, {value: 'MN', label: 'Minnesota'}, {value: 'MS', label: 'Mississippi'},
+		{value: 'MO', label: 'Missouri'}, {value: 'MT', label: 'Montana'}, {value: 'NE', label: 'Nebraska'},
+		{value: 'NV', label: 'Nevada'}, {value: 'NH', label: 'New Hampshire'}, {value: 'NJ', label: 'New Jersey'},
+		{value: 'NM', label: 'New Mexico'}, {value: 'NY', label: 'New York'}, {value: 'NC', label: 'North Carolina'},
+		{value: 'ND', label: 'North Dakota'}, {value: 'OH', label: 'Ohio'}, {value: 'OK', label: 'Oklahoma'},
+		{value: 'OR', label: 'Oregon'}, {value: 'PA', label: 'Pennsylvania'}, {value: 'RI', label: 'Rhode Island'},
+		{value: 'SC', label: 'South Carolina'}, {value: 'SD', label: 'South Dakota'}, {value: 'TN', label: 'Tennessee'},
+		{value: 'TX', label: 'Texas'}, {value: 'UT', label: 'Utah'}, {value: 'VT', label: 'Vermont'},
+		{value: 'VA', label: 'Virginia'}, {value: 'WA', label: 'Washington'}, {value: 'WV', label: 'West Virginia'},
+		{value: 'WI', label: 'Wisconsin'}, {value: 'WY', label: 'Wyoming'},
+	]
+
+	$effect(() => {
+		if (step === 'otp') {
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					inputs[0]?.focus()
+				})
+			})
+		}
+		if (step in APP_STEP_MAP) {
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					const form = document.querySelector(`[id^="alt-${step}"]`) || document.querySelector('.step-content')
+					const first = form?.querySelector<HTMLElement>('input:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex="0"]')
+					first?.focus()
+				})
+			})
+		}
+	})
+
+	// --- Application flow (after login) ---
+	const APP_STEPS = [
+		{label: 'Profile'},
+		{label: 'About You'},
+		{label: 'Financial Info'},
+		{label: 'Review'},
+	]
+	const APP_STEP_MAP: Record<string, number> = {profile: 0, about: 1, financial: 2, review: 3}
+	const isAppFlow = $derived(step in APP_STEP_MAP)
+	const appStepIndex = $derived(APP_STEP_MAP[step] ?? 0)
+
+	// --- Responsive density ---
+	let innerWidth = $state(0)
+	const densityValue = $derived(innerWidth >= 640 ? 'comfortable' : 'mobile') as 'comfortable' | 'mobile'
+
+	// --- Step indicator ---
+	const loginStepIndex = $derived(step === 'email' ? 0 : 1)
+	let mounted = $state(false)
+	onMount(() => {
+		requestAnimationFrame(() => {
+			mounted = true
+		})
+	})
+</script>
+
+<svelte:window bind:innerWidth />
+
+<div class="flex flex-col h-screen overflow-hidden">
+<!-- Outer wrapper -->
+<div class="dot-grid flex flex-1 min-h-0 flex-col min-[640px]:items-center {isAppFlow ? 'min-[640px]:pt-[8vh] min-[640px]:px-24 min-[640px]:h-screen' : 'min-[640px]:p-24 min-[640px]:flex-initial min-[640px]:h-auto min-[640px]:min-h-screen min-[640px]:justify-center'} min-[640px]:relative">
+	<!-- Desktop page-level logo — app flow only -->
+	{#if isAppFlow}
+		<div class="hidden min-[640px]:flex items-center gap-8 absolute top-24 left-24 row-enter row-delay-1">
+			<svg width="28" height="28" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+				<path d="M16 2L4 9v14l12 7 12-7V9L16 2z" fill="var(--ii-primary)" />
+				<path d="M16 6l-8 4.5v9L16 24l8-4.5v-9L16 6z" fill="white" />
+				<path d="M16 10l-4 2.25v4.5L16 19l4-2.25v-4.5L16 10z" fill="var(--ii-primary)" />
+			</svg>
+			<span class="text-h3 text-body">Meridian Finance</span>
+		</div>
+	{/if}
+	<DensityProvider density={densityValue}>
+		<div class="flex flex-1 min-h-0 flex-col min-[640px]:relative min-[640px]:flex-initial">
+			<!-- Desktop vertical stepper — app flow only, positioned to left of card -->
+			{#if isAppFlow}
+				<div class="hidden min-[1040px]:flex flex-col gap-0 absolute right-full mr-32 pt-48 w-[104px]">
+					{#each APP_STEPS as appStep, i}
+						<div class="row-enter flex items-start gap-12" style="animation-delay: {80 + i * 70}ms">
+							<!-- Dot + line -->
+							<div class="flex flex-col items-center">
+								<div
+									class="rounded-full shrink-0 w-12 h-12 transition-all duration-300 ease-in-out
+										{i <= appStepIndex ? 'bg-primary' : 'bg-gray-300'}"
+									style="transition-delay: {i <= appStepIndex && i > 0 ? '400ms' : '0ms'}"
+								></div>
+								{#if i < APP_STEPS.length - 1}
+									<div class="w-[2px] h-32 relative overflow-hidden bg-gray-200">
+										<div
+											class="absolute inset-x-0 top-0 bg-primary transition-all duration-500 ease-in-out"
+											style="height: {i < appStepIndex ? '100%' : '0%'}; transition-delay: {i < appStepIndex ? '100ms' : '0ms'}"
+										></div>
+									</div>
+								{/if}
+							</div>
+							<!-- Label -->
+							<span class="text-small font-medium -mt-2 whitespace-nowrap transition-colors duration-300 {i === appStepIndex ? 'text-body' : i < appStepIndex ? 'text-secondary' : 'text-tertiary'}">
+								{appStep.label}
+							</span>
+						</div>
+					{/each}
+				</div>
+			{/if}
+
+		<div class="flex min-w-0 min-h-0 flex-1 flex-col min-[640px]:flex-initial min-[640px]:rounded-16 {!isAppFlow ? 'min-[640px]:w-[440px] card-border min-[640px]:h-[574px]' : 'overflow-hidden card-border-tl min-[640px]:flex-1 card-width-responsive'}">
+			<!-- Form side -->
+			<div class="flex w-full min-w-0 min-h-0 flex-1 flex-col {isAppFlow ? 'min-[640px]:pt-40' : 'px-16 min-[375px]:px-24 min-[640px]:p-40'}">
+				<!-- Persistent logo + step indicator for app flow (doesn't fade) -->
+				{#if isAppFlow}
+					<div class="flex shrink-0 items-center gap-8 pt-24 min-[640px]:hidden px-24">
+						<svg width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+							<path d="M16 2L4 9v14l12 7 12-7V9L16 2z" fill="var(--ii-primary)" />
+							<path d="M16 6l-8 4.5v9L16 24l8-4.5v-9L16 6z" fill="white" />
+							<path d="M16 10l-4 2.25v4.5L16 19l4-2.25v-4.5L16 10z" fill="var(--ii-primary)" />
+						</svg>
+						<span class="text-emphasis text-body">Meridian Finance</span>
+					</div>
+					<div class="flex items-center justify-center gap-8 pt-16 min-[1040px]:hidden px-24">
+						{#each APP_STEPS as _, i}
+							<div class="h-6 rounded-full" style="background: {i === appStepIndex ? 'var(--ii-primary)' : 'var(--ii-gray-300)'}; width: {i === appStepIndex ? '36px' : '16px'}; transition: width 0.4s ease, background-color 0.4s ease;"></div>
+						{/each}
+					</div>
+				{/if}
+
+				<!-- Content that fades between steps -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div class="step-content flex flex-1 min-h-0 flex-col" class:fade-out={transitioning} class:overflow-y-auto={!isAppFlow} onkeydown={isAppFlow ? handleFocusTrap : undefined} onfocusin={handleFocusIn}>
+					<!-- Push content toward center on mobile (login flow only) -->
+					{#if !isAppFlow}
+						<div class="h-[12vh] min-[640px]:hidden"></div>
+					{/if}
+
+					{#if step === 'email'}
+						<!-- Logo -->
+						<div class="row-enter row-delay-1 flex h-56 shrink-0 items-center justify-center gap-8 pt-24 min-[640px]:pt-0">
+							<svg width="28" height="28" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+								<path d="M16 2L4 9v14l12 7 12-7V9L16 2z" fill="var(--ii-primary)" />
+								<path d="M16 6l-8 4.5v9L16 24l8-4.5v-9L16 6z" fill="white" />
+								<path d="M16 10l-4 2.25v4.5L16 19l4-2.25v-4.5L16 10z" fill="var(--ii-primary)" />
+							</svg>
+							<span class="text-h3 text-body">Meridian Finance</span>
+						</div>
+
+						<!-- Header -->
+						<div class="row-enter row-delay-2 pt-48 pb-16 text-center mx-auto w-full max-w-[320px]">
+							<div class="text-h2 text-body m-0">Your Loan Application</div>
+							<p class="text-m3-emphasis text-tertiary mt-4 m-0">
+								Enter your email to get started or continue
+							</p>
+						</div>
+
+						<!-- Input -->
+						<form id="alt-email-form" class="row-enter row-delay-3 flex flex-col mx-auto w-full max-w-[320px] p-4 -m-4" onsubmit={(e) => { e.preventDefault(); emailLoading = true; setTimeout(() => { emailLoading = false; transitionTo('otp') }, 800) }}>
+							{#if emailError}
+								<div class="mb-16">
+									<IIAlert variant="error" dismissible onDismiss={() => (emailError = '')}>
+										{#snippet children()}
+											{emailError}
+										{/snippet}
+									</IIAlert>
+								</div>
+							{/if}
+
+							<IIInput
+								type="email"
+								placeholder="name@example.com"
+								bind:value={email}
+								inputmode="email"
+								autocomplete="email"
+								error={!!emailError}
+								autofocus
+							/>
+						</form>
+
+						<!-- Info section -->
+						<div class="row-enter row-delay-4 mb-24 mt-auto pt-24 mx-auto w-full max-w-[320px]">
+							<p class="text-emphasis text-body m-0 mb-12">Here's what happens next:</p>
+							<ul class="m-0 list-none p-0 flex flex-col gap-8">
+								<li class="relative pl-20 text-default text-secondary">
+									<span class="absolute left-0 text-accent">&#x2713;</span>
+									New here? We'll help you get started
+								</li>
+								<li class="relative pl-20 text-default text-secondary">
+									<span class="absolute left-0 text-accent">&#x2713;</span>
+									Already applied? Pick up right where you left off
+								</li>
+								<li class="relative pl-20 text-default text-secondary">
+									<span class="absolute left-0 text-accent">&#x2713;</span>
+									All done? Check your loan status
+								</li>
+							</ul>
+						</div>
+
+					{:else if step === 'otp'}
+						<!-- Back button -->
+						<div class="row-enter row-delay-1 flex h-56 shrink-0 items-center justify-center gap-10 pt-24 min-[640px]:pt-0">
+							<IIButton variant="ghost" size="sm" onclick={() => transitionTo('email')}>
+								{#snippet children()}
+									&larr; Back
+								{/snippet}
+							</IIButton>
+						</div>
+
+						<!-- Header -->
+						<div class="row-enter row-delay-2 pt-48 pb-16 text-center mx-auto w-full max-w-[320px]">
+							<div class="text-h2 text-body m-0">Enter verification code</div>
+							<p class="text-m3-emphasis text-tertiary mt-4 m-0">
+								We sent a 6-digit code to <strong class="text-body">john@example.com</strong>
+							</p>
+						</div>
+
+						<!-- OTP Input -->
+						<form id="alt-otp-form" class="row-enter row-delay-3 flex flex-col w-full" onsubmit={(e) => { e.preventDefault(); verifying = true; setTimeout(() => { verifying = false; transitionTo('profile') }, 800) }}>
+							{#if otpError}
+								<div class="mb-16">
+									<IIAlert variant="error" dismissible onDismiss={() => (otpError = '')}>
+										{#snippet children()}
+											{otpError}
+										{/snippet}
+									</IIAlert>
+								</div>
+							{/if}
+
+							<div class="mb-16">
+								<div class="flex gap-8 max-w-[320px] mx-auto" role="group" aria-label="Verification code">
+									{#each digits as digit, i}
+										<input
+											bind:this={inputs[i]}
+											bind:value={digits[i]}
+											type="text"
+											inputmode="text"
+											autocomplete={i === 0 ? 'one-time-code' : 'off'}
+											maxlength="1"
+											pattern="[a-zA-Z0-9]"
+											class="w-full h-auto aspect-square text-center !text-m1 font-medium text-body bg-input-bg border-2 rounded-8 outline-none transition-all duration-fast
+												{otpError
+												? 'border-error'
+												: digit
+													? 'border-primary'
+													: 'border-input-border'}
+												focus:border-primary focus:ring-2 focus:ring-primary/20"
+											oninput={(e) => handleOtpInput(i, e)}
+											onkeydown={(e) => handleOtpKeydown(i, e)}
+											onpaste={handleOtpPaste}
+											aria-label="Digit {i + 1}"
+										/>
+									{/each}
+								</div>
+							</div>
+
+							<!-- Delivery Status -->
+							<div class="mb-16 flex justify-center">
+								<div class="flex justify-center gap-0" role="status" aria-label="Code delivery status">
+									<!-- Sent -->
+									<div class="flex flex-col items-center" style="min-width: 56px">
+										<div
+											class="w-24 h-24 rounded-full flex items-center justify-center shrink-0
+												{hasFailed
+												? 'bg-error text-inverse'
+												: sentComplete
+													? 'bg-primary text-inverse'
+													: 'bg-muted text-secondary'}
+												{deliveryStatus === 'sending' ? ' animate-pulse' : ''}"
+										>
+											{#if sentComplete && !hasFailed}
+												<svg width="12" height="12" viewBox="0 0 256 256" fill="currentColor">
+													<path d="m229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32" />
+												</svg>
+											{:else if hasFailed}
+												<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+													<line x1="18" y1="6" x2="6" y2="18"></line>
+													<line x1="6" y1="6" x2="18" y2="18"></line>
+												</svg>
+											{/if}
+										</div>
+										<span class="mt-4 text-[10px] text-secondary">Sent</span>
+									</div>
+
+									<!-- Connector -->
+									<div class="flex items-start pt-12">
+										<div
+											class="mx-6 h-[2px] w-80 transition-colors duration-500
+												{hasFailed ? 'bg-error' : deliveredComplete ? 'bg-primary' : 'bg-muted'}"
+										></div>
+									</div>
+
+									<!-- Delivered -->
+									<div class="flex flex-col items-center" style="min-width: 56px">
+										<div
+											class="w-24 h-24 rounded-full flex items-center justify-center shrink-0
+												{hasFailed
+												? 'bg-error text-inverse'
+												: deliveredComplete
+													? 'bg-primary text-inverse'
+													: isInFlight
+														? 'bg-primary text-inverse animate-pulse'
+														: 'bg-muted text-secondary'}"
+										>
+											{#if deliveredComplete}
+												<svg width="12" height="12" viewBox="0 0 256 256" fill="currentColor">
+													<path d="m229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32" />
+												</svg>
+											{:else if hasFailed}
+												<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+													<line x1="18" y1="6" x2="6" y2="18"></line>
+													<line x1="6" y1="6" x2="18" y2="18"></line>
+												</svg>
+											{/if}
+										</div>
+										<span class="mt-4 text-[10px] text-secondary">
+											{#if hasFailed}Failed{:else}Delivered{/if}
+										</span>
+									</div>
+								</div>
+							</div>
+
+							{#if deliveryError}
+								<p class="mt-0 mb-16 p-0 text-center text-default text-error">{deliveryError}</p>
+							{/if}
+						</form>
+
+						<!-- Help text -->
+						<div class="row-enter row-delay-4 mb-24 mt-auto mx-auto w-full max-w-[320px] text-center">
+							<p class="m-0 text-tiny text-tertiary leading-relaxed">
+								Didn't receive the code?
+								<button
+									type="button"
+									class="cursor-default border-0 bg-transparent p-0 text-tiny text-accent underline outline-none focus-visible:ring-3 focus-visible:ring-primary rounded-4"
+									disabled={isResending}
+									onclick={() => {
+										isResending = true
+										deliveryStatus = 'sending'
+										setTimeout(() => (deliveryStatus = 'sent'), 800)
+										setTimeout(() => { deliveryStatus = 'delivered'; isResending = false }, 2000)
+									}}
+								>
+									{isResending ? 'Sending...' : 'Resend code'}
+								</button>
+								or
+								<button
+									type="button"
+									class="cursor-default border-0 bg-transparent p-0 text-tiny text-accent underline outline-none focus-visible:ring-3 focus-visible:ring-primary rounded-4"
+									onclick={() => transitionTo('email')}
+								>
+									try a different email
+								</button>
+							</p>
+						</div>
+					{:else if step === 'profile'}
+						<!-- Sticky header -->
+						<div class="row-enter row-delay-2 pt-24 min-[1040px]:pt-0 pb-16 shrink-0 px-24 min-[640px]:px-40">
+							<div class="text-h2 text-body m-0">Update Your Info</div>
+							<p class="text-m3-emphasis text-tertiary mt-4 m-0">
+								Please provide your information to continue
+							</p>
+						</div>
+
+						<!-- Scrollable form area with top fade mask on scroll -->
+						<div
+							class="flex-1 min-h-0 overflow-y-scroll pl-24 pr-16 min-[640px]:pl-40 form-scroll-fade form-pr-responsive"
+							class:form-scroll-mask={formScrolled}
+							onscroll={(e) => { formScrolled = (e.currentTarget as HTMLElement).scrollTop > 0 }}
+							onfocusin={handleFocusIn}
+						>
+							<form id="alt-profile-form" class="row-enter row-delay-3 flex flex-col gap-16 pb-16" onsubmit={(e) => { e.preventDefault(); transitionTo('about') }}>
+								<div class="flex flex-col min-[640px]:flex-row gap-16">
+									<div class="flex-1"><IIInput label="First Name" bind:value={firstName} placeholder="George" autofocus /></div>
+									<div class="flex-1"><IIInput label="Last Name" bind:value={lastName} placeholder="Jones" /></div>
+								</div>
+								<IIDateInput label="Date of Birth" bind:value={dob} />
+								<IIInput label="Phone Number" bind:value={phone} placeholder="(555) 555-5555" type="tel" inputmode="tel" />
+
+								<!-- SMS Preferences -->
+								<div class="flex flex-col gap-12 py-8">
+									<div class="flex items-center justify-between gap-16">
+										<div>
+											<p class="text-emphasis text-body m-0">Account Updates</p>
+											<p class="text-small text-tertiary m-0">Payment reminders and notifications via SMS</p>
+										</div>
+										<IISwitch checked={accountUpdates} onCheckedChange={(v) => (accountUpdates = v)} />
+									</div>
+									<div class="flex items-center justify-between gap-16">
+										<div>
+											<p class="text-emphasis text-body m-0">Promotional</p>
+											<p class="text-small text-tertiary m-0">Special offers and news via SMS</p>
+										</div>
+										<IISwitch checked={promotional} onCheckedChange={(v) => (promotional = v)} />
+									</div>
+								</div>
+
+								<IIInput label="Street Address" bind:value={streetAddress} placeholder="123 West Elm" />
+								<IIInput label="City" bind:value={city} placeholder="Saratoga Springs" />
+								<IIDropdownInput
+									matchTriggerWidth
+									label="State"
+									placeholder="Select state"
+									items={US_STATES}
+									bind:value={stateValue}
+								/>
+								<IIInput label="ZIP Code" bind:value={zip} placeholder="84045" inputmode="numeric" />
+							</form>
+
+							<!-- Cancel link -->
+							<div class="row-enter row-delay-4 mt-8 mb-16 flex justify-center">
+								<IIButton variant="ghost" onclick={() => transitionTo('email')}>
+									{#snippet children()}
+										Cancel
+									{/snippet}
+								</IIButton>
+							</div>
+
+							<div class="row-enter" style="animation-delay: 330ms">
+								<IIButton
+									variant="primary"
+									class="w-full"
+									type="submit"
+									form="alt-profile-form"
+								>
+									{#snippet children()}
+										Continue
+									{/snippet}
+								</IIButton>
+							</div>
+							<div class="pb-48"></div>
+						</div>
+
+					{:else if step === 'about'}
+						<!-- Header -->
+						<div class="row-enter row-delay-2 pt-24 min-[1040px]:pt-0 pb-16 shrink-0 px-24 min-[640px]:px-40">
+							<div class="text-h2 text-body m-0">About You</div>
+							<p class="text-m3-emphasis text-tertiary mt-4 m-0">Tell us a bit more about yourself</p>
+						</div>
+						<!-- Scrollable form -->
+						<div
+							class="flex-1 min-h-0 overflow-y-scroll pl-24 pr-16 min-[640px]:pl-40 form-scroll-fade form-pr-responsive"
+							class:form-scroll-mask={formScrolled}
+							onscroll={(e) => { formScrolled = (e.currentTarget as HTMLElement).scrollTop > 0 }}
+							onfocusin={handleFocusIn}
+						>
+							<form id="alt-about-form" class="row-enter row-delay-3 flex flex-col gap-16 pb-16" onsubmit={(e) => { e.preventDefault(); transitionTo('financial') }}>
+								<!-- Loan -->
+								<IIInput label="Loan Amount" bind:value={loanAmount} placeholder="$5,000" inputmode="numeric" autofocus />
+								<!-- Personal -->
+								<div class="border-t border-gray-200 pt-16"></div>
+								<IIDropdownInput matchTriggerWidth label="Best Time to Call" placeholder="Select time" items={CALL_TIMES} bind:value={bestTimeToCall} />
+								<IIInput label="Social Security Number" bind:value={ssn} placeholder="XXX-XX-XXXX" />
+								<div class="flex flex-col gap-4">
+									<span class="text-small-emphasis text-secondary">ID Type</span>
+									<IISegmentedControl items={ID_TYPES} bind:value={idType} />
+								</div>
+								<IIInput label="ID Number" bind:value={idNumber} placeholder="ID number" />
+								<IIDropdownInput matchTriggerWidth label="Issuing State" placeholder="Select state" items={US_STATES} bind:value={issuingState} />
+								<!-- Military -->
+								<div class="border-t border-gray-200 pt-16"></div>
+								<IIDropdownInput matchTriggerWidth label="Military Service" placeholder="Select option" items={MILITARY_OPTIONS} bind:value={militaryStatus} />
+								<!-- Housing -->
+								<div class="border-t border-gray-200 pt-16"></div>
+								<IIDropdownInput matchTriggerWidth label="Time at Current Address" placeholder="Select duration" items={TIME_AT_ADDRESS} bind:value={timeAtAddress} />
+								<div class="flex flex-col gap-4">
+									<span class="text-small-emphasis text-secondary">Do you own or rent?</span>
+									<IISegmentedControl items={OWN_RENT} bind:value={ownOrRent} />
+								</div>
+							</form>
+							<div class="row-enter row-delay-4 mt-8 mb-16 flex justify-center">
+								<IIButton variant="ghost" onclick={() => transitionTo('profile')}>
+									{#snippet children()}Back{/snippet}
+								</IIButton>
+							</div>
+							<div class="row-enter" style="animation-delay: 330ms">
+								<IIButton variant="primary" class="w-full" type="submit" form="alt-about-form">
+									{#snippet children()}Continue{/snippet}
+								</IIButton>
+							</div>
+							<div class="pb-48"></div>
+						</div>
+
+					{:else if step === 'financial'}
+						<!-- Header -->
+						<div class="row-enter row-delay-2 pt-24 min-[1040px]:pt-0 pb-16 shrink-0 px-24 min-[640px]:px-40">
+							<div class="text-h2 text-body m-0">Financial Info</div>
+							<p class="text-m3-emphasis text-tertiary mt-4 m-0">Income and banking details</p>
+						</div>
+						<!-- Scrollable form -->
+						<div
+							class="flex-1 min-h-0 overflow-y-scroll pl-24 pr-16 min-[640px]:pl-40 form-scroll-fade form-pr-responsive"
+							class:form-scroll-mask={formScrolled}
+							onscroll={(e) => { formScrolled = (e.currentTarget as HTMLElement).scrollTop > 0 }}
+							onfocusin={handleFocusIn}
+						>
+							<form id="alt-financial-form" class="row-enter row-delay-3 flex flex-col gap-16 pb-16" onsubmit={(e) => { e.preventDefault(); transitionTo('review') }}>
+								<!-- Income -->
+								<IIDropdownInput matchTriggerWidth label="Income Type" placeholder="Select income type" items={INCOME_TYPES} bind:value={incomeType} />
+								<IIInput label="Annual Gross Income" bind:value={annualIncome} placeholder="$50,000" inputmode="numeric" />
+								<div class="flex flex-col gap-4">
+									<span class="text-small-emphasis text-secondary">Pay Frequency</span>
+									<IISegmentedControl items={PAY_FREQUENCIES} bind:value={payFrequency} />
+								</div>
+								<div class="flex flex-col gap-4">
+									<span class="text-small-emphasis text-secondary">Pay Type</span>
+									<IISegmentedControl items={PAY_TYPES} bind:value={payType} />
+								</div>
+								<!-- Banking -->
+								<div class="border-t border-gray-200 pt-16"></div>
+								<IIInput label="Bank Name" bind:value={bankName} placeholder="Bank name" />
+								<div class="flex flex-col min-[640px]:flex-row gap-16">
+									<div class="flex-1"><IIInput label="Routing Number" bind:value={routingNumber} placeholder="9 digits" inputmode="numeric" /></div>
+									<div class="flex-1"><IIInput label="Account Number" bind:value={accountNumber} placeholder="Account number" /></div>
+								</div>
+								<div class="flex flex-col gap-4">
+									<span class="text-small-emphasis text-secondary">Account Type</span>
+									<IISegmentedControl items={ACCOUNT_TYPES} bind:value={accountType} />
+								</div>
+								<IIDropdownInput matchTriggerWidth label="Account Age" placeholder="Select duration" items={ACCOUNT_AGES} bind:value={accountAge} />
+							</form>
+							<div class="row-enter row-delay-4 mt-8 mb-16 flex justify-center">
+								<IIButton variant="ghost" onclick={() => transitionTo('about')}>
+									{#snippet children()}Back{/snippet}
+								</IIButton>
+							</div>
+							<div class="row-enter" style="animation-delay: 330ms">
+								<IIButton variant="primary" class="w-full" type="submit" form="alt-financial-form">
+									{#snippet children()}Continue{/snippet}
+								</IIButton>
+							</div>
+							<div class="pb-48"></div>
+						</div>
+
+					{:else if step === 'review'}
+						<!-- Header -->
+						<div class="row-enter row-delay-2 pt-24 min-[1040px]:pt-0 pb-16 shrink-0 px-24 min-[640px]:px-40">
+							<div class="text-h2 text-body m-0">Review</div>
+							<p class="text-m3-emphasis text-tertiary mt-4 m-0">Please review your information before submitting</p>
+						</div>
+						<!-- Scrollable review -->
+						<div
+							class="flex-1 min-h-0 overflow-y-scroll pl-24 pr-16 min-[640px]:pl-40 form-scroll-fade form-pr-responsive"
+							class:form-scroll-mask={formScrolled}
+							onscroll={(e) => { formScrolled = (e.currentTarget as HTMLElement).scrollTop > 0 }}
+							onfocusin={handleFocusIn}
+						>
+							<div class="row-enter row-delay-3 flex flex-col gap-24 pb-16">
+								<!-- Personal -->
+								<div>
+									<div class="flex items-center justify-between mb-8">
+										<h3 class="text-emphasis text-body m-0">Personal Information</h3>
+										<button class="text-tiny text-accent border-0 bg-transparent p-0 cursor-default underline outline-none focus-visible:ring-3 focus-visible:ring-primary rounded-4" onclick={() => transitionTo('profile')}>Edit</button>
+									</div>
+									<div class="flex flex-col gap-4 text-small text-secondary">
+										<p class="m-0">{firstName || '—'} {lastName || '—'}</p>
+										<p class="m-0">{phone || '—'}</p>
+										<p class="m-0">{email || '—'}</p>
+									</div>
+								</div>
+								<!-- Address -->
+								<div>
+									<div class="flex items-center justify-between mb-8">
+										<h3 class="text-emphasis text-body m-0">Address</h3>
+										<button class="text-tiny text-accent border-0 bg-transparent p-0 cursor-default underline outline-none focus-visible:ring-3 focus-visible:ring-primary rounded-4" onclick={() => transitionTo('profile')}>Edit</button>
+									</div>
+									<div class="flex flex-col gap-4 text-small text-secondary">
+										<p class="m-0">{streetAddress || '—'}</p>
+										<p class="m-0">{city || '—'}{stateValue ? `, ${stateValue}` : ''} {zip || ''}</p>
+									</div>
+								</div>
+								<!-- About You -->
+								<div>
+									<div class="flex items-center justify-between mb-8">
+										<h3 class="text-emphasis text-body m-0">About You</h3>
+										<button class="text-tiny text-accent border-0 bg-transparent p-0 cursor-default underline outline-none focus-visible:ring-3 focus-visible:ring-primary rounded-4" onclick={() => transitionTo('about')}>Edit</button>
+									</div>
+									<div class="flex flex-col gap-4 text-small text-secondary">
+										<p class="m-0">Loan Amount: {loanAmount || '—'}</p>
+										<p class="m-0">SSN: {ssn ? '***-**-' + ssn.slice(-4) : '—'}</p>
+										<p class="m-0">Military: {MILITARY_OPTIONS.find(o => o.value === militaryStatus)?.label || '—'}</p>
+										<p class="m-0">Housing: {OWN_RENT.find(o => o.value === ownOrRent)?.label || '—'}</p>
+									</div>
+								</div>
+								<!-- Financial -->
+								<div>
+									<div class="flex items-center justify-between mb-8">
+										<h3 class="text-emphasis text-body m-0">Financial Info</h3>
+										<button class="text-tiny text-accent border-0 bg-transparent p-0 cursor-default underline outline-none focus-visible:ring-3 focus-visible:ring-primary rounded-4" onclick={() => transitionTo('financial')}>Edit</button>
+									</div>
+									<div class="flex flex-col gap-4 text-small text-secondary">
+										<p class="m-0">Income: {INCOME_TYPES.find(o => o.value === incomeType)?.label || '—'} — {annualIncome || '—'}/yr</p>
+										<p class="m-0">Pay: {PAY_FREQUENCIES.find(o => o.value === payFrequency)?.label || '—'}, {PAY_TYPES.find(o => o.value === payType)?.label || '—'}</p>
+										<p class="m-0">Bank: {bankName || '—'} ({ACCOUNT_TYPES.find(o => o.value === accountType)?.label || '—'})</p>
+										<p class="m-0">Routing: {routingNumber ? '***' + routingNumber.slice(-4) : '—'} / Account: {accountNumber ? '***' + accountNumber.slice(-4) : '—'}</p>
+									</div>
+								</div>
+							</div>
+							<div class="row-enter row-delay-4 mt-8 mb-16 flex justify-center">
+								<IIButton variant="ghost" onclick={() => transitionTo('financial')}>
+									{#snippet children()}Back{/snippet}
+								</IIButton>
+							</div>
+							<div class="row-enter" style="animation-delay: 330ms">
+								<IIButton variant="primary" class="w-full">
+									{#snippet children()}Submit Application{/snippet}
+								</IIButton>
+							</div>
+							<div class="pb-48"></div>
+						</div>
+					{/if}
+
+				</div>
+
+				<!-- Persistent bottom area — step indicator + button (login flow only) -->
+				<div class="pb-24 min-[640px]:pb-0 mx-auto w-full max-w-[320px]" class:hidden={isAppFlow}>
+					<!-- Login step indicator (email/otp only) -->
+					{#if !isAppFlow}
+						<div class="flex items-center justify-center gap-8 mb-24 mt-24">
+							{#each Array(2) as _, i}
+								<div
+									class="h-6 rounded-full"
+									style="
+										background: {mounted && i === loginStepIndex ? 'var(--ii-primary)' : 'var(--ii-gray-300)'};
+										width: {mounted && i === loginStepIndex ? '36px' : '16px'};
+										transition: width 0.4s ease, background-color 0.4s ease;
+									"
+								></div>
+							{/each}
+						</div>
+					{:else}
+						<div class="mt-24"></div>
+					{/if}
+
+					{#if step === 'email'}
+						<IIButton
+							variant="primary"
+							class="w-full"
+							type="submit"
+							form="alt-email-form"
+							loading={emailLoading}
+						>
+							{#snippet children()}
+								Continue
+							{/snippet}
+						</IIButton>
+					{:else if step === 'otp' && hasFailed}
+						<IIButton
+							variant="primary"
+							class="w-full"
+							type="button"
+							onclick={() => transitionTo('email')}
+						>
+							{#snippet children()}
+								Use Different Email
+							{/snippet}
+						</IIButton>
+					{:else if step === 'otp'}
+						<IIButton
+							variant="primary"
+							class="w-full"
+							type="submit"
+							form="alt-otp-form"
+							disabled={!isComplete || verifying}
+							loading={verifying}
+						>
+							{#snippet children()}
+								Verify
+							{/snippet}
+						</IIButton>
+					{/if}
+				</div>
+			</div>
+
+		</div>
+		</div>
+	</DensityProvider>
+</div>
+</div>
+
+<style>
+	.dot-grid {
+		background-image:
+			linear-gradient(160deg, transparent 30%, white 55%),
+			radial-gradient(circle, color-mix(in srgb, var(--ii-primary) 13%, transparent) 1.5px, transparent 1.5px);
+		background-size: 100% 100%, 24px 24px;
+		background-color: var(--ii-gray-50, #f9fafb);
+	}
+
+
+
+	.card-border {
+		position: relative;
+		background: linear-gradient(160deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 35%);
+	}
+
+	.card-border::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		border: 1px solid var(--ii-gray-200, #e5e7eb);
+		pointer-events: none;
+		-webkit-mask-image: linear-gradient(160deg, black 20%, transparent 60%);
+		mask-image: linear-gradient(160deg, black 20%, transparent 60%);
+	}
+
+
+	.card-border-tl {
+		position: relative;
+		background: linear-gradient(160deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 35%);
+	}
+
+	.card-border-tl::before,
+	.card-border-tl::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+	}
+
+	/* Top border — fades out sooner */
+	.card-border-tl::before {
+		border-top: 1px solid var(--ii-gray-200, #e5e7eb);
+		-webkit-mask-image: linear-gradient(to right, black 0%, transparent 90%);
+		mask-image: linear-gradient(to right, black 0%, transparent 90%);
+	}
+
+	/* Left border — fades out later */
+	.card-border-tl::after {
+		border-left: 1px solid var(--ii-gray-200, #e5e7eb);
+		-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 90%);
+		mask-image: linear-gradient(to bottom, black 0%, transparent 90%);
+	}
+
+	@keyframes row-fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(-8px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.row-enter {
+		animation: row-fade-in 400ms ease both;
+	}
+
+	.row-delay-1 { animation-delay: 50ms; }
+	.row-delay-2 { animation-delay: 120ms; }
+	.row-delay-3 { animation-delay: 190ms; }
+	.row-delay-4 { animation-delay: 260ms; }
+
+	@media (min-width: 640px) {
+		.card-width-responsive {
+			width: 440px;
+		}
+
+		.form-pr-responsive {
+			padding-right: 24px;
+		}
+	}
+
+	@media (min-width: 1040px) {
+		.card-width-responsive {
+			width: 720px;
+		}
+
+		.form-pr-responsive {
+			padding-right: clamp(32px, 10vw, 140px);
+		}
+	}
+
+	.form-scroll-fade {
+		-webkit-mask-image: linear-gradient(to bottom, black calc(100% - 48px), rgba(0,0,0,0.1) 100%);
+		mask-image: linear-gradient(to bottom, black calc(100% - 48px), rgba(0,0,0,0.1) 100%);
+	}
+
+	.form-scroll-fade.form-scroll-mask {
+		-webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 24px, black calc(100% - 48px), rgba(0,0,0,0.1) 100%);
+		mask-image: linear-gradient(to bottom, transparent 0px, black 24px, black calc(100% - 48px), rgba(0,0,0,0.1) 100%);
+	}
+
+	.step-content {
+		opacity: 1;
+		transition: opacity 200ms ease;
+	}
+
+	.step-content.fade-out {
+		opacity: 0;
+	}
+</style>