63:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 64:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 65:T1037b,// Brio UI · contact-form · MIT License · Copyright (c) 2026 Harjot Singh Rana · https://brioui.com/docs/components/contact-form 'use client' /* * Reduced-motion preference, hydration-safe: the server and the hydrating render both read * `false`, then React re-renders with the real value, so server HTML and the first client * render always agree. */ const REDUCED_QUERY = '(prefers-reduced-motion: reduce)' function subscribeReduced(onChange: () => void) { const mq = window.matchMedia(REDUCED_QUERY) mq.addEventListener('change', onChange) return () => mq.removeEventListener('change', onChange) } const getReduced = () => window.matchMedia(REDUCED_QUERY).matches const getServerReduced = () => false /** * Contact Form: the "Get in touch" / "Contact sales" form, done properly. * * Topic chips at the top (Sales, Support, Press, Other by default) with a * pill that slides between them; each topic reshapes the form (Sales asks * for company and team size, Support doesn't) and the card's height glides * to fit. A work email fills the company field from its domain * ("dana@acme-labs.com" → "Acme Labs", marked "from your email"; * free mail never does). The message box grows as you type and only shows a * counter near the limit. * * The hidden details: give it your business hours and it tells people when * they'll actually hear back, in their own time zone ("Expect a reply by * tomorrow, 10:00 AM"), and whether you're online right now ("Back Monday, * 9:00 AM"). And an accidental reload never loses a half-written message: * the draft is kept for the tab session and restored with an Undo-able note. * * Sending: errors sit in the label row (nothing below the field moves; an * empty field you only tabbed past is not flagged until a send attempt), the * bad fields shake once and the first one takes focus. While sending, the * button holds its width (send, sending and retry labels share one cell) and * keeps focus; then the form folds into a summary of what was sent, which * takes focus, with the reply estimate and "Send another". A failed send * keeps everything and offers Try again. * * Long topic or size lists scroll inside about seven rows (at most half the * screen) with an edge fade; long unbroken text wraps instead of leaving the * card. Reply times a week or more out name the date, not just the weekday. * * Responsive: one column under a 460px card; the card stops at 72ch * (--contact-form-max-width) so the message keeps a readable measure; touch * screens get 44px chips and buttons; a Tab onto the message box scrolls the * whole box into view. * * Native inputs and labels underneath; the chips are radio groups with arrow * keys; status changes are announced. No native selects. Reduced motion: * fades instead of slides and shakes. * * Server rendering: pass `now` when you pass `hours`, so the status and the * estimate render on the server. Without it they appear after mount. * * Corners follow --ui-radius, --ui-radius-sm, --ui-radius-pill. Theme via * library tokens (--ui-ink, --ui-surface, --ui-accent, --ui-ok, --ui-danger) * or --contact-form-* overrides. * * Requires: react >= 19, motion >= 11. */ import { AnimatePresence, animate, motion, useAnimate, useMotionValue, type MotionValue, type Transition } from 'motion/react' import { createElement, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, type CSSProperties, type FormEvent, type HTMLAttributes, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, } from 'react' /* Icons: Iconoir (MIT, © 2021 Luca Burgio, iconoir.com), inlined so the component stays dependency-free. */ const UI_ICONS = { 'suitcase': [['path', { d: 'M8 7H4C2.89543 7 2 7.89543 2 9V19C2 20.1046 2.89543 21 4 21H20C21.1046 21 22 20.1046 22 19V9C22 7.89543 21.1046 7 20 7H16M8 7V3.6C8 3.26863 8.26863 3 8.6 3H15.4C15.7314 3 16 3.26863 16 3.6V7M8 7H16' }]], 'headset-help': [['path', { d: 'M4 11.4998L3.51493 11.6211C2.62459 11.8437 2 12.6436 2 13.5614V15.4382C2 16.356 2.62459 17.1559 3.51493 17.3785L5.25448 17.8134C5.63317 17.9081 6 17.6217 6 17.2313V11.7683C6 11.3779 5.63317 11.0915 5.25448 11.1862L4 11.4998ZM4 11.4998V11C4 6.58172 7.58172 3 12 3C16.4183 3 20 6.58172 20 11V11.4998M20 11.4998L20.4851 11.6211C21.3754 11.8437 22 12.6436 22 13.5614V15.4382C22 16.356 21.3754 17.1559 20.4851 17.3785L20 17.4998M20 11.4998L18.7455 11.1862C18.3668 11.0915 18 11.3779 18 11.7683V17.2313C18 17.6217 18.3668 17.9081 18.7455 17.8134L20 17.4998M15 20.5H18C19.1046 20.5 20 19.6046 20 18.5V18V17.4998M15 20.5C15 19.6716 14.3284 19 13.5 19H10.5C9.67157 19 9 19.6716 9 20.5C9 21.3284 9.67157 22 10.5 22H13.5C14.3284 22 15 21.3284 15 20.5Z' }]], 'megaphone': [['path', { d: 'M14 14V6M14 14L20.1023 17.487C20.5023 17.7156 21 17.4268 21 16.9661V3.03391C21 2.57321 20.5023 2.28439 20.1023 2.51296L14 6M14 14H7C4.79086 14 3 12.2091 3 10V10C3 7.79086 4.79086 6 7 6H14' }], ['path', { d: 'M7.75716 19.3001L7 14H11L11.6772 18.7401C11.8476 19.9329 10.922 21 9.71716 21C8.73186 21 7.8965 20.2755 7.75716 19.3001Z' }]], 'chat-lines': [['path', { d: 'M8 10L12 10L16 10' }], ['path', { d: 'M8 14L10 14L12 14' }], ['path', { d: 'M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.8214 2.48697 15.5291 3.33782 17L2.5 21.5L7 20.6622C8.47087 21.513 10.1786 22 12 22Z' }]], 'clock': [['path', { d: 'M12 6L12 12L18 12' }], ['path', { d: 'M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' }]], 'check-circle': [['path', { d: 'M7 12.5L10 15.5L17 8.5' }], ['path', { d: 'M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' }]], 'refresh-double': [['path', { d: 'M21.1679 8C19.6247 4.46819 16.1006 2 11.9999 2C6.81459 2 2.55104 5.94668 2.04932 11' }], ['path', { d: 'M17 8H21.4C21.7314 8 22 7.73137 22 7.4V3' }], ['path', { d: 'M2.88146 16C4.42458 19.5318 7.94874 22 12.0494 22C17.2347 22 21.4983 18.0533 22 13' }], ['path', { d: 'M7.04932 16H2.64932C2.31795 16 2.04932 16.2686 2.04932 16.6V21' }]], 'send-diagonal': [['path', { d: 'M22.1525 3.55321L11.1772 21.0044L9.50686 12.4078L2.00002 7.89795L22.1525 3.55321Z' }], ['path', { d: 'M9.45557 12.4436L22.1524 3.55321' }]], 'warning-circle': [['path', { d: 'M12 7L12 13' }], ['path', { d: 'M12 17.01L12.01 16.9989' }], ['path', { d: 'M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' }]], 'building': [['path', { d: 'M10 9.01L10.01 8.99889' }], ['path', { d: 'M14 9.01L14.01 8.99889' }], ['path', { d: 'M10 13.01L10.01 12.9989' }], ['path', { d: 'M14 13.01L14.01 12.9989' }], ['path', { d: 'M10 17.01L10.01 16.9989' }], ['path', { d: 'M14 17.01L14.01 16.9989' }], ['path', { d: 'M6 20.4V5.6C6 5.26863 6.26863 5 6.6 5H12V3.6C12 3.26863 12.2686 3 12.6 3H17.4C17.7314 3 18 3.26863 18 3.6V20.4C18 20.7314 17.7314 21 17.4 21H6.6C6.26863 21 6 20.7314 6 20.4Z' }]], } as const satisfies Record])[]> type UiIconName = keyof typeof UI_ICONS function UiIcon({ name, size = 16, className }: { name: UiIconName; size?: number; className?: string }) { return ( ) } /* ────────────────────────────────────────────────────────────────────────── */ /* Types */ /* ────────────────────────────────────────────────────────────────────────── */ /** One topic chip. `fields` adds the company and/or team-size rows for this topic. */ export type ContactTopic = { /** Sent as `data.topic`. */ id: string /** Chip text. */ label: string /** Chip icon. The default topics have icons. */ icon?: ReactNode /** Extra rows for this topic. */ fields?: ('company' | 'size')[] /** Message placeholder for this topic. */ placeholder?: string /** Business hours until a reply, for this topic (overrides `replyWithin`). */ replyWithin?: number } /** What `onSubmit` receives. */ export type ContactData = { topic: string name: string email: string company?: string size?: string message: string } /** When someone is around to answer. Hours are in `timeZone` (an IANA name); days are 0 (Sunday) to 6. */ export type ContactHours = { /** * Open days, 0 (Sunday) to 6. `[]` means closed. * * @default [1, 2, 3, 4, 5] */ days?: number[] /** * Opening and closing hour, 0–24, in `timeZone`. Opening hour, 0–24. @default 9 * * @default `9` */ start?: number /** * Opening and closing hour, 0–24, in `timeZone`. Closing hour, 0–24, after `start`. @default 17 * * @default `17` */ end?: number /** * IANA time zone of the hours, e.g. "Europe/Berlin". Defaults to the visitor's. * `'America/New_York'`. * * @default visitor's zone */ timeZone?: string } /** All user-facing copy. Pass any subset through `labels` to translate or reword. */ export type ContactFormLabels = { title: string topic: string /** Summary row name for the topic. @default 'Topic' */ topicShort: string name: string email: string company: string size: string message: string namePlaceholder: string emailPlaceholder: string companyPlaceholder: string messagePlaceholder: string /** Tag next to the company label when it was filled from the email. */ fromEmail: string /** Counter near the limit. @default n => `${n} left` */ left: (n: number) => string required: string invalidEmail: string tooShort: string submit: string sending: string /** Estimate line; `when` reads "tomorrow, 10:00 AM". @default w => `Expect a reply by ${w}` */ replyBy: (when: string) => string online: string /** Header status when closed. @default w => `Back ${w}` */ back: (when: string) => string draftRestored: string discardDraft: string sentTitle: string /** @default (topic, email) => `Your ${topic.toLowerCase()} message is on its way. We'll reply to ${email}.` */ sentBody: (topic: string, email: string) => string /** Summary row for a reference returned by `onSubmit`. @default r => `Reference ${r}` */ reference: (ref: string) => string sendAnother: string failed: string retry: string } /** Props for {@link ContactForm}. */ export type ContactFormProps = { /** * Called with the form's data. Return (or resolve) `{ reference }` to show it; throw (or reject) * to show the error state. Sends the message. */ onSubmit?: (data: ContactData) => void | { reference?: string } | Promise /** * Topic chips. Defaults to Sales, Support, Press and Other. Pass `[]` for no chips. `[]` for * none. * * @default Sales, Support, Press, Other */ topics?: ContactTopic[] /** * Starting topic id. * * @default first topic */ defaultTopic?: string /** * Team-size chips for topics with `fields: ['size']`. @default ['1–10', '11–50', '51–200', * '201–1,000', '1,000+'] * * @default `['1–10', '11–50', '51–200', '201–1,000', '1,000+']` */ sizes?: string[] /** Business hours until a reply. With `hours` it skips nights and weekends. Omit for no estimate. */ replyWithin?: number /** Business hours; adds the online/back status and makes `replyWithin` skip closed time. */ hours?: ContactHours /** * The current time. Without it the clock is read after mount, so the status and reply estimate * appear on the client only; pass it to server-render them. * * @default read after mount */ now?: Date /** * Most characters in the message (at least 20). A counter shows in the last 20%. A longer prefill * or draft is cut without splitting an emoji. Most characters in the message. @default 2000 */ messageLimit?: number /** Prefill. A work email also fills the company. Prefill (a signed-in visitor). */ defaultValues?: Partial> /** sessionStorage key for the draft; `null` turns drafts off. @default 'brio:contact-form:draft' */ storageKey?: string | null /** * BCP 47 locale for times. Defaults to the runtime locale. * * @default runtime locale */ locale?: string /** Copy overrides, merged over the English defaults. */ labels?: Partial /** Extra class on the root (`.cf-root`). */ className?: string /** Inline styles on the root; handy for `--contact-form-*` variables. */ style?: CSSProperties } const DEFAULT_LABELS: ContactFormLabels = { title: 'Get in touch', topic: 'What is this about?', topicShort: 'Topic', name: 'Name', email: 'Work email', company: 'Company', size: 'Team size', message: 'Message', namePlaceholder: 'Dana Whitfield', emailPlaceholder: 'dana@company.com', companyPlaceholder: 'Company name', messagePlaceholder: 'How can we help?', fromEmail: 'from your email', left: n => `${n} left`, required: 'Required', invalidEmail: 'Check this address', tooShort: 'A few more words?', submit: 'Send message', sending: 'Sending…', replyBy: w => `Expect a reply by ${w}`, online: "We're online now", back: w => `Back ${w}`, draftRestored: 'Draft restored', discardDraft: 'Discard', sentTitle: 'Message sent', sentBody: (t, e) => `Your ${t ? `${t.toLowerCase()} ` : ''}message is on its way. We'll reply to ${e}.`, reference: r => `Reference ${r}`, sendAnother: 'Send another', failed: "Couldn't send your message. Nothing was lost.", retry: 'Try again', } const DEFAULT_TOPICS: ContactTopic[] = [ { id: 'sales', label: 'Sales', fields: ['company', 'size'], placeholder: 'Tell us about your team and what you need.' }, { id: 'support', label: 'Support', placeholder: 'What happened, and what did you expect?' }, { id: 'press', label: 'Press', fields: ['company'], placeholder: 'Your outlet, deadline and question.' }, { id: 'other', label: 'Other' }, ] const TOPIC_ICONS: Record = { sales: 'suitcase', support: 'headset-help', press: 'megaphone', other: 'chat-lines' } const DEFAULT_SIZES = ['1–10', '11–50', '51–200', '201–1,000', '1,000+'] const EASE_OUT = [0.23, 1, 0.32, 1] as const const SPRING = { type: 'spring' as const, visualDuration: 0.38, bounce: 0.12 } const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/ /* free and personal mail: never a company */ const FREE_MAIL = new Set( 'gmail.com googlemail.com yahoo.com ymail.com yahoo.co.uk outlook.com hotmail.com live.com msn.com icloud.com me.com mac.com aol.com proton.me protonmail.com pm.me gmx.com gmx.de gmx.net web.de mail.ru yandex.ru yandex.com zoho.com qq.com 163.com 126.com hey.com fastmail.com tutanota.com tuta.io duck.com'.split(' '), ) /* "dana@eu.acme-labs.co.uk" → "Acme Labs" */ function companyFromEmail(email: string): string | null { const domain = email.split('@')[1]?.toLowerCase().trim() if (!domain || !domain.includes('.') || FREE_MAIL.has(domain)) return null const parts = domain.split('.') const sld = parts.length >= 3 && parts[parts.length - 1].length === 2 && ['co', 'com', 'org', 'net', 'ac', 'gov', 'edu'].includes(parts[parts.length - 2]) const name = parts[parts.length - (sld ? 3 : 2)] /* punycode ("xn--mller-kva") can't be shown as a name */ if (!name || name.length < 2 || name.startsWith('xn--')) return null return name .split(/[-_]/) .filter(Boolean) .map(w => w[0].toUpperCase() + w.slice(1)) .join(' ') } /* ────────────────────────────────────────────────────────────────────────── */ /* Business hours */ /* ────────────────────────────────────────────────────────────────────────── */ const HOUR = 3_600_000 /* the wall clock in a zone, as a UTC timestamp (so day arithmetic is plain) */ function wallClock(t: number, timeZone?: string) { try { const p = Object.fromEntries( new Intl.DateTimeFormat('en-US', { timeZone, hourCycle: 'h23', year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', weekday: 'short' }) .formatToParts(t) .map(x => [x.type, x.value]), ) return Date.UTC(+p.year, +p.month - 1, +p.day, +p.hour % 24, +p.minute) } catch { return null } } /** When a reply is due (`within` business hours from now), whether it's open now, and when it next opens. */ function schedule(now: number, within: number | undefined, hours: ContactHours | undefined) { /* an empty `days` means closed: no status and no estimate */ const days = Array.isArray(hours?.days) ? hours.days : hours ? [1, 2, 3, 4, 5] : [0, 1, 2, 3, 4, 5, 6] const start = hours ? Math.max(0, Math.min(24, hours.start ?? 9)) : 0 const end = hours ? Math.max(start, Math.min(24, hours.end ?? 17)) : 24 const wall = wallClock(now, hours?.timeZone) ?? now const offset = wall - now const dayOf = (w: number) => Math.floor(w / 86_400_000) * 86_400_000 const isOpenAt = (w: number) => days.includes(new Date(w).getUTCDay()) && w >= dayOf(w) + start * HOUR && w < dayOf(w) + end * HOUR const open = end > start && isOpenAt(wall) let opens: number | null = null let due: number | null = null if (end > start) { let remaining = within != null && Number.isFinite(within) ? Math.max(0, within) * HOUR : null let cursor = wall for (let i = 0; i < 400 && (opens === null || (remaining !== null && due === null)); i++) { const d = dayOf(cursor) if (days.includes(new Date(d).getUTCDay())) { const from = Math.max(cursor, d + start * HOUR) const to = d + end * HOUR if (from < to) { if (opens === null && from > wall) opens = from - offset if (remaining !== null && due === null) { if (remaining <= to - from) due = from + remaining - offset else remaining -= to - from } } } cursor = d + 86_400_000 } } return { open, opens, due } } /* the comma between day and time, in the locale's script: "غدًا، ١٠:٣٠" and "明日 10:00", not ", " */ function daySeparator(locale: string | undefined) { try { const script = new Intl.Locale(new Intl.DateTimeFormat(locale).resolvedOptions().locale).maximize().script if (script === 'Arab') return '، ' if (script === 'Jpan' || script === 'Hans' || script === 'Hant' || script === 'Kore') return ' ' } catch { /* old runtimes: the Latin comma */ } return ', ' } /* * "today, 3:40 PM" / "tomorrow, 10:00 AM" / "Monday, 9:00 AM" in the visitor's zone; a week or more * out it names the date ("Tue, Oct 13, 3:30 PM") so a weekday never points at the wrong week. Wrapped * in bidi isolates so it reads correctly inside an RTL or LTR sentence. */ function whenText(t: number, now: number, locale: string | undefined) { const a = new Date(t) const b = new Date(now) const diff = Math.round((new Date(a.getFullYear(), a.getMonth(), a.getDate()).getTime() - new Date(b.getFullYear(), b.getMonth(), b.getDate()).getTime()) / 86_400_000) const time = new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit' }).format(a) const day = diff <= 1 ? new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }).format(diff, 'day') : diff <= 6 ? new Intl.DateTimeFormat(locale, { weekday: 'long' }).format(a) : new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric', ...(a.getFullYear() !== b.getFullYear() ? { year: 'numeric' } : {}) }).format(a) return `\u2068${day}${daySeparator(locale)}${time}\u2069` } /* cut to `n` UTF-16 units without splitting an emoji or a combined character */ function clip(text: string, n: number) { if (text.length <= n) return text if (typeof Intl.Segmenter === 'function') { let out = '' for (const { segment } of new Intl.Segmenter(undefined, { granularity: 'grapheme' }).segment(text)) { if (out.length + segment.length > n) break out += segment } return out } const cut = text.slice(0, n) return /[\uD800-\uDBFF]$/.test(cut) ? cut.slice(0, -1) : cut } /* one console warning per message, in development only */ const warned = new Set() function devWarn(message: string) { const dev = (globalThis as { process?: { env?: Record } }).process?.env?.NODE_ENV !== 'production' if (!dev || warned.has(message)) return warned.add(message) console.warn(message) } /* ────────────────────────────────────────────────────────────────────────── */ /* Component */ /* ────────────────────────────────────────────────────────────────────────── */ type Field = 'name' | 'email' | 'company' | 'message' type Phase = 'form' | 'sending' | 'sent' | 'error' type Draft = { topic: string; name: string; email: string; company: string; size: string; message: string } /* what sessionStorage holds: the draft plus whether the company came from the email */ type SavedDraft = Draft & { auto?: boolean } /** * A contact form whose topics reshape it, with company autofill, a real * reply-time estimate, a kept draft and a summary when sent. */ export function ContactForm({ onSubmit, topics: topicsProp, defaultTopic, sizes = DEFAULT_SIZES, replyWithin, hours, now: nowProp, messageLimit = 2000, defaultValues, storageKey = 'brio:contact-form:draft', locale, labels: labelsProp, className, style, }: ContactFormProps) { const reduced = useSyncExternalStore(subscribeReduced, getReduced, getServerReduced) const labels = { ...DEFAULT_LABELS, ...labelsProp } const uid = useId().replace(/[^\w-]/g, '') const topics = Array.isArray(topicsProp) ? topicsProp : DEFAULT_TOPICS const limit = Math.max(20, Math.round(Number.isFinite(messageLimit) ? messageLimit : 2000)) const [v, setV] = useState(() => ({ topic: topics.find(t => t.id === defaultTopic)?.id ?? topics[0]?.id ?? '', name: defaultValues?.name ?? '', email: defaultValues?.email ?? '', company: defaultValues?.company ?? companyFromEmail(defaultValues?.email ?? '') ?? '', size: '', message: clip(defaultValues?.message ?? '', limit), })) const topic = topics.find(t => t.id === v.topic) ?? topics[0] const fields = topic?.fields ?? [] const [companyAuto, setCompanyAuto] = useState(() => !defaultValues?.company && !!companyFromEmail(defaultValues?.email ?? '')) const [touched, setTouched] = useState>>({}) const [attempt, setAttempt] = useState(0) const [phase, setPhase] = useState('form') const [reference, setReference] = useState(null) const [failMessage, setFailMessage] = useState(null) const [restored, setRestored] = useState(null) /* the clock: given, or read once after mount. Never during render, so server and client markup agree and a prerendering build (Next.js cacheComponents) doesn't stop on Date.now(). Until then no status or estimate. */ const [clock, setClock] = useState(null) useEffect(() => { if (!nowProp) setClock(Date.now()) }, [nowProp]) const now = nowProp?.getTime() ?? clock const within = topic?.replyWithin ?? replyWithin const sched = useMemo(() => (now != null && (hours || within != null) ? schedule(now, within, hours) : null), [now, within, hours]) if (now != null && hours?.timeZone && Number.isFinite(now) && wallClock(now, hours.timeZone) === null) devWarn(`ContactForm: unknown time zone "${hours.timeZone}"; the visitor's zone is used.`) if (now != null && !Number.isFinite(now)) devWarn('ContactForm: `now` is an invalid date; no status or estimate is shown.') if (hours && (hours.end ?? 17) <= (hours.start ?? 9)) devWarn('ContactForm: `hours.end` must be after `hours.start` (overnight hours are not supported); no status or estimate is shown.') const replyLine = now != null && sched?.due != null ? labels.replyBy(whenText(sched.due, now, locale)) : null const statusLine = now != null && hours && sched ? (sched.open ? labels.online : sched.opens != null ? labels.back(whenText(sched.opens, now, locale)) : null) : null /* errors: shown once a field was left, or after a send attempt */ const errors: Partial> = {} if (!v.name.trim()) errors.name = labels.required if (!v.email.trim()) errors.email = labels.required else if (!EMAIL.test(v.email.trim())) errors.email = labels.invalidEmail if (!v.message.trim()) errors.message = labels.required else if (v.message.trim().length < 10) errors.message = labels.tooShort const shown = (f: Field) => (touched[f] || attempt > 0 ? errors[f] : undefined) const set = (k: K, value: Draft[K]) => setV(prev => ({ ...prev, [k]: value })) const onEmail = (email: string) => { /* fill the company from a work email, unless they typed one themselves */ if (!v.company || companyAuto) { const guess = companyFromEmail(email) setV(prev => ({ ...prev, email, company: guess ?? (companyAuto ? '' : prev.company) })) setCompanyAuto(!!guess) } else set('email', email) } /* draft: restored once after hydration, saved as they type, cleared when sent */ const draftKey = storageKey ? `${storageKey}` : null useEffect(() => { if (!draftKey) return let saved: SavedDraft | null = null try { saved = JSON.parse(sessionStorage.getItem(draftKey) ?? 'null') } catch { saved = null } if (!saved || typeof saved.message !== 'string' || !saved.message.trim()) return const { auto, ...draft } = saved queueMicrotask(() => { setV(prev => ({ ...prev, ...draft, topic: topics.some(t => t.id === draft.topic) ? draft.topic : prev.topic, message: clip(draft.message, limit) })) setCompanyAuto(!!auto && !!draft.company) setRestored(draft) }) }, [draftKey]) // eslint-disable-line react-hooks/exhaustive-deps useEffect(() => { if (!draftKey || phase !== 'form') return const t = setTimeout(() => { try { if (v.message.trim()) sessionStorage.setItem(draftKey, JSON.stringify({ ...v, auto: companyAuto } satisfies SavedDraft)) else sessionStorage.removeItem(draftKey) } catch { /* storage blocked: drafts are a nicety */ } }, 400) return () => clearTimeout(t) }, [v, companyAuto, draftKey, phase]) const clearDraft = () => { try { if (draftKey) sessionStorage.removeItem(draftKey) } catch { /* ignore */ } } /* height: glides when the topic or phase changes the form, follows instantly while typing */ const innerRef = useRef(null) const height = useMotionValue('auto') const glide = useRef(false) useEffect(() => { const el = innerRef.current if (!el) return const ro = new ResizeObserver(() => { const h = el.offsetHeight /* * a size change during a glide retargets it: a plain set() would be overwritten by the running * spring, leaving the card stuck at the old target (clipped or with a gap) */ if ((glide.current || height.isAnimating()) && !reduced && typeof height.get() === 'number') animate(height, h, SPRING) else height.jump(h) glide.current = false }) ro.observe(el) return () => ro.disconnect() }, [height, reduced]) /* the message box grows with its text, up to a point */ const msgRef = useRef(null) useEffect(() => { const el = msgRef.current if (!el) return el.style.height = 'auto' el.style.height = `${el.scrollHeight + 2}px` }, [v.message, phase]) /* * focus never falls to : "Message sent" takes it when the form folds away, and the message * box takes it after "Send another" or "Discard" (their buttons unmount) */ const rootRef = useRef(null) const sentRef = useRef(null) const focusNext = useRef<'message' | null>(null) useEffect(() => { if (phase === 'sent') { const a = document.activeElement if (!a || a === document.body || rootRef.current?.contains(a)) sentRef.current?.focus() } else if (focusNext.current === 'message' && phase === 'form') msgRef.current?.focus() focusNext.current = null }, [phase, restored]) /* a failed check shakes the bad fields once and focuses the first */ const [scope, animateScope] = useAnimate() useEffect(() => { if (!attempt || !scope.current) return const bad = scope.current.querySelectorAll('[aria-invalid="true"]') if (!bad.length) return ;(bad[0] as HTMLElement).focus() if (!reduced) animateScope('.cf-field[data-invalid]', { x: [0, -5, 5, -3, 3, 0] }, { duration: 0.36, ease: 'easeOut' }) }, [attempt]) // eslint-disable-line react-hooks/exhaustive-deps const submit = async (e?: FormEvent) => { e?.preventDefault() if (phase === 'sending') return if (Object.keys(errors).length) { setAttempt(a => a + 1) return } const data: ContactData = { topic: v.topic, name: v.name.trim(), email: v.email.trim(), ...(fields.includes('company') && v.company.trim() ? { company: v.company.trim() } : {}), ...(fields.includes('size') && v.size ? { size: v.size } : {}), message: v.message.trim(), } /* the failure note folds away on retry: let the card glide with it */ if (phase === 'error') glide.current = true setPhase('sending') try { const r = await onSubmit?.(data) setReference(r && typeof r === 'object' && r.reference ? String(r.reference) : null) clearDraft() setRestored(null) glide.current = true setPhase('sent') } catch (err) { setFailMessage(err instanceof Error && err.message ? err.message : null) glide.current = true setPhase('error') } } const sendAnother = () => { glide.current = true focusNext.current = 'message' setV(prev => ({ ...prev, message: '' })) setAttempt(0) setTouched({}) setPhase('form') } const discardDraft = () => { /* the note (and its button) goes away: keep focus in the form */ if (scope.current?.contains(document.activeElement)) focusNext.current = 'message' clearDraft() setRestored(null) setV(prev => ({ ...prev, message: '' })) } const chooseTopic = (id: string) => { if (id === v.topic) return /* only a change of rows moves the card; otherwise the flag would make the next keystroke glide */ const next = topics.find(t => t.id === id)?.fields ?? [] if (next.join() !== fields.join()) glide.current = true set('topic', id) } const ids = { name: `${uid}-name`, email: `${uid}-email`, company: `${uid}-company`, message: `${uid}-message` } const left = limit - v.message.length const sending = phase === 'sending' const titleId = `${uid}-title` return (

{labels.title}

{statusLine && ( {statusLine} )}

{phase === 'sent' ? (
{labels.sentTitle}

{labels.sentBody(topic?.label ?? '', v.email.trim())}

{[ topic && { k: labels.topicShort, v: topic.label }, { k: labels.name, v: v.name.trim() }, fields.includes('company') && v.company.trim() && { k: labels.company, v: v.company.trim() }, fields.includes('size') && v.size && { k: labels.size, v: v.size }, { k: labels.message, v: v.message.trim(), long: true }, ] .filter((r): r is { k: string; v: string; long?: boolean } => !!r) .map((r, i) => (
{r.k}

{r.v}
))}
{(replyLine || reference) && (
{replyLine && ( {replyLine} )} {reference && {labels.reference(reference)}}
)} ) : ( {restored && (
{labels.draftRestored}
)} {topics.length > 0 && ( ({ id: t.id, label: t.label, icon: t.icon ?? (TOPIC_ICONS[t.id] ? : null) }))} onChange={chooseTopic} layoutId={`${uid}-pill`} reduced={reduced} disabled={sending} /> )}
set('name', e.target.value)} onBlur={e => e.currentTarget.value.trim() && setTouched(t => ({ ...t, name: true }))} aria-invalid={!!shown('name')} aria-describedby={shown('name') ? `${ids.name}-e` : undefined} readOnly={sending} /> onEmail(e.target.value)} onBlur={e => e.currentTarget.value.trim() && setTouched(t => ({ ...t, email: true }))} aria-invalid={!!shown('email')} aria-describedby={shown('email') ? `${ids.email}-e` : undefined} readOnly={sending} dir="ltr" />
{/* topic-specific rows glide in and out */} {fields.includes('company') && ( { setCompanyAuto(false) set('company', e.target.value) }} readOnly={sending} data-auto={(companyAuto && !!v.company) || undefined} /> )} {fields.includes('size') && sizes.length > 0 && ( ({ id: s, label: s }))} onChange={s => set('size', v.size === s ? '' : s)} layoutId={`${uid}-size`} reduced={reduced} disabled={sending} small /> )} set('message', e.target.value)} onBlur={e => e.currentTarget.value.trim() && setTouched(t => ({ ...t, message: true }))} onFocus={e => { /* browsers only reveal the caret line of a box that is partly off screen; show all of it */ const r = e.currentTarget.getBoundingClientRect() if ((r.top < 0 || r.bottom > window.innerHeight) && r.height < window.innerHeight) e.currentTarget.scrollIntoView({ block: 'nearest' }) }} onKeyDown={e => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) submit() }} aria-invalid={!!shown('message')} aria-describedby={shown('message') ? `${ids.message}-e` : undefined} readOnly={sending} dir="auto" /> </FieldRow> <AnimatePresence initial={false}> {phase === 'error' && ( <motion.div key="fail" className="cf-fail" role="alert" initial={reduced ? { opacity: 0 } : { opacity: 0, y: -4 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} transition={{ duration: 0.22, ease: EASE_OUT }}> <UiIcon name="warning-circle" size={15} /> <span>{failMessage ?? labels.failed}</span> </motion.div> )} </AnimatePresence> <div className="cf-actions"> {/* aria-disabled, not disabled, while sending: focus stays on the button for the retry */} <button type="submit" className="cf-submit" aria-disabled={sending || undefined} aria-busy={sending || undefined}> {/* all three labels share one grid cell: the button never changes width */} <span className="cf-submit-stack"> <span data-on={phase === 'form' || undefined} aria-hidden={phase !== 'form'}> {labels.submit} <UiIcon name="send-diagonal" size={15} /> </span> <span data-on={phase === 'error' || undefined} aria-hidden={phase !== 'error'}> {labels.retry} <UiIcon name="send-diagonal" size={15} /> </span> <span data-on={sending || undefined} aria-hidden={!sending}> <i className="cf-spinner" aria-hidden /> {labels.sending} </span> </span> </button> {replyLine && ( <span className="cf-reply"> <UiIcon name="clock" size={14} /> {replyLine} </span> )} </div> </motion.form> )} </AnimatePresence> </div> </motion.div> <span className="cf-sr" aria-live="polite"> {sending ? labels.sending : phase === 'sent' ? labels.sentTitle : ''} </span> </div> ) } /* A label row (label left, hint or error right) above a control: errors never push the layout. */ function FieldRow({ id, label, error, hint, hintTone, children }: { id: string; label: string; error?: string; hint?: string; hintTone?: 'warn'; children: ReactNode }) { return ( <div className="cf-field" data-invalid={error ? '' : undefined}> <div className="cf-label-row"> <label htmlFor={id}>{label}</label> {error ? ( <span className="cf-error" id={`${id}-e`}> {error} </span> ) : hint ? ( <span className="cf-hint" data-tone={hintTone}> {hint} </span> ) : null} </div> {children} </div> ) } /* ────────────────────────────────────────────────────────────────────────── */ /* InkTrack: a sliding pill whose labels never vanish under it */ /* ────────────────────────────────────────────────────────────────────────── */ /* * The items are drawn twice: once in their resting colours, and once on top in the pill's colours, clipped to * the pill. The pill and the clip ride the same spring values, so a label turns over exactly where the pill * covers it at every frame of the slide, instead of vanishing (the same colour as the pill) until it lands. * Measured on change and resize only; the slide runs on motion values, with no re-render per frame. */ function InkTrack({ prefix, className, active, reduced, transition, radius, trackRef, children, ...rest }: Omit<HTMLAttributes<HTMLDivElement>, 'children'> & { /** Class prefix for the pill and the copy (`<prefix>-ink-pill`, `<prefix>-ink-copy`). */ prefix: string className: string /** The `data-ink` key of the item the pill sits on, or null for none. Items may sit at any depth, as long as nothing between them and the track is positioned (their offsets are read against the track). */ active: string | null reduced: boolean transition: Transition /** The pill's corner radius, a CSS length or var() (the chips' own radius, so the two always match). */ radius: string /** Also handed the track element (a ref callback; its cleanup runs too). */ trackRef?: (el: HTMLDivElement | null) => void | (() => void) /** Renders the content: `ink` is false for the real one, true for the inert copy drawn in the pill's colours (the copy sets no `data-ink`, ids or roles). */ children: (ink: boolean) => ReactNode }) { const ref = useRef<HTMLDivElement | null>(null) const setRef = useCallback( (el: HTMLDivElement | null) => { ref.current = el return trackRef?.(el) }, [trackRef], ) const x = useMotionValue(0) const y = useMotionValue(0) const w = useMotionValue(0) const h = useMotionValue(0) const tw = useMotionValue(0) const th = useMotionValue(0) const [shown, setShown] = useState(false) const placed = useRef(false) /* the copy's clip follows the pill on every change, set or animated. (A derived useTransform missed values set straight in the layout effect, so with reduced motion the labels stayed clipped to the old spot.) */ const clip = useMotionValue('inset(0 100% 100% 0)') useLayoutEffect(() => { const sync = () => clip.set(`inset(${y.get()}px ${tw.get() - x.get() - w.get()}px ${th.get() - y.get() - h.get()}px ${x.get()}px round ${radius})`) sync() const offs = [x, y, w, h, tw, th].map(mv => mv.on('change', sync)) return () => offs.forEach(off => off()) }, [clip, x, y, w, h, tw, th, radius]) useLayoutEffect(() => { const el = ref.current if (!el) return const place = (slide: boolean) => { tw.set(el.offsetWidth) th.set(el.offsetHeight) const t = active == null ? null : el.querySelector<HTMLElement>(`[data-ink="${globalThis.CSS.escape(active)}"]`) if (!t) { placed.current = false setShown(false) return } const to: [MotionValue<number>, number][] = [ [x, t.offsetLeft], [y, t.offsetTop], [w, t.offsetWidth], [h, t.offsetHeight], ] for (const [mv, v] of to) { if (slide && placed.current && !reduced) animate(mv, v, transition) else mv.set(v) } placed.current = true setShown(true) } place(true) const ro = new ResizeObserver(() => place(false)) ro.observe(el) return () => ro.disconnect() }, [active, reduced]) // eslint-disable-line react-hooks/exhaustive-deps return ( <div ref={setRef} className={className} {...rest} data-ink-shown={shown || undefined}> <motion.span className={`${prefix}-ink-pill`} aria-hidden style={{ x, y, width: w, height: h, borderRadius: radius }} /> {children(false)} <motion.div className={`${prefix}-ink-copy`} aria-hidden inert style={{ clipPath: clip }}> {children(true)} </motion.div> </div> ) } /* A radio group of chips with a pill that slides to the chosen one. */ function Chips({ label, value, options, onChange, layoutId, reduced, disabled, small, }: { label: string value: string options: { id: string; label: string; icon?: ReactNode }[] onChange: (id: string) => void layoutId: string reduced: boolean disabled?: boolean small?: boolean }) { const labelId = `${layoutId}-l` /* a long list scrolls inside a capped height; fades mark the clipped edges (DOM only, no re-renders) */ const listRef = useRef<HTMLDivElement>(null) useEffect(() => { const el = listRef.current if (!el) return const update = () => { const top = el.scrollTop > 1 const bottom = el.scrollTop + el.clientHeight < el.scrollHeight - 1 const fade = top && bottom ? 'both' : top ? 'top' : bottom ? 'bottom' : null if (fade) { if (el.dataset.fade !== fade) el.dataset.fade = fade } else if (el.dataset.fade) delete el.dataset.fade } update() el.addEventListener('scroll', update, { passive: true }) const ro = new ResizeObserver(update) ro.observe(el) return () => { el.removeEventListener('scroll', update) ro.disconnect() } }, [options.length]) const onKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => { const keys: Record<string, number> = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 } if (!(e.key in keys)) return e.preventDefault() const dir = getComputedStyle(e.currentTarget).direction === 'rtl' && (e.key === 'ArrowRight' || e.key === 'ArrowLeft') ? -1 : 1 const i = Math.max(0, options.findIndex(o => o.id === value)) const ni = (i + keys[e.key] * dir + options.length) % options.length onChange(options[ni].id) ;(e.currentTarget.querySelectorAll<HTMLElement>('[role="radio"]')[ni])?.focus() } return ( <div className="cf-chips-wrap"> <div className="cf-chips-label" id={labelId}> {label} </div> <motion.div ref={listRef} layoutScroll className="cf-chips" data-small={small || undefined}> <InkTrack prefix="cf" className="cf-chips-track" role="radiogroup" aria-labelledby={labelId} onKeyDown={onKeyDown} active={value || null} reduced={reduced} transition={SPRING} radius="var(--_pill)"> {ink => options.map((o, i) => { const on = o.id === value return ( <button key={o.id} type="button" role={ink ? undefined : 'radio'} aria-checked={ink ? undefined : on} tabIndex={ink ? -1 : on || (!value && i === 0) ? 0 : -1} data-id={ink ? undefined : o.id} data-ink={ink ? undefined : o.id} className="cf-chip" onClick={ink ? undefined : () => onChange(o.id)} disabled={disabled} > {o.icon && <span className="cf-chip-icon">{o.icon}</span>} <span className="cf-chip-text" dir="auto"> {o.label} </span> </button> ) }) } </InkTrack> </motion.div> </div> ) } /* ────────────────────────────────────────────────────────────────────────── */ /* Styles: injected once, hoisted by React 19 */ /* ────────────────────────────────────────────────────────────────────────── */ function ContactFormStyles() { return ( <style href="contact-form" precedence="medium"> {CSS} </style> ) } const CSS = /* css */ ` .cf-root { --_ink: var(--contact-form-ink, var(--ui-ink, #17140f)); --_surface: var(--contact-form-surface, var(--ui-surface, #fbf8f1)); --_accent: var(--contact-form-accent, var(--ui-accent, #d4452b)); --_ok: var(--contact-form-ok, var(--ui-ok, #2f7d4f)); --_danger: var(--contact-form-danger, var(--ui-danger, #c2410c)); --_warn: var(--ui-warn, #9a6200); --_radius: var(--contact-form-radius, var(--ui-radius, 16px)); --_radius-sm: var(--ui-radius-sm, 8px); --_pill: var(--ui-radius-pill, 999px); --_line: color-mix(in oklab, var(--_ink) 12%, transparent); --_soft: color-mix(in oklab, var(--_ink) 5%, transparent); --_muted: color-mix(in oklab, var(--_ink) 66%, transparent); display: flex; flex-direction: column; gap: 14px; padding: 22px; border: 1px solid var(--_line); border-radius: var(--_radius); background: var(--_surface); color: var(--_ink); font-size: 14px; line-height: 1.45; text-align: start; container-type: inline-size; /* a wide container never stretches the message past a readable measure */ max-inline-size: var(--contact-form-max-width, 72ch); } .cf-root button { font: inherit; color: inherit; margin: 0; } .cf-root :is(button, input, textarea):focus-visible { outline: 2px solid var(--_accent); outline-offset: 2px; } .cf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cf-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; } .cf-title { flex: 1 1 10em; min-width: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; } .cf-status { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; font-size: 12.5px; color: var(--_muted); text-wrap: pretty; overflow-wrap: anywhere; } .cf-status i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in oklab, var(--_ink) 30%, transparent); } .cf-status[data-open] i { background: var(--_ok); box-shadow: 0 0 0 3px color-mix(in oklab, var(--_ok) 18%, transparent); } /* the body clips while its height glides; the padding keeps focus rings visible */ .cf-body { overflow: hidden; margin: -4px; } .cf-inner { padding: 4px; } .cf-form { display: flex; flex-direction: column; gap: 16px; } .cf-draft { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: calc(var(--_radius-sm) * 1.1); background: var(--_soft); font-size: 12.5px; color: var(--_muted); } .cf-draft span { flex: 1; min-width: 0; text-wrap: pretty; } .cf-root .cf-draft button { position: relative; padding: 2px 8px; border: 0; border-radius: var(--_pill); background: none; font-weight: 600; color: var(--_ink); cursor: pointer; } .cf-root .cf-draft button:hover { background: var(--_soft); } /* chips */ .cf-chips-wrap { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .cf-chips-label, .cf-label-row label { font-size: 12.5px; font-weight: 600; color: color-mix(in oklab, var(--_ink) 78%, transparent); } /* long lists scroll inside ~7 rows; the padding keeps focus rings inside the scroll box */ .cf-chips { max-height: min(20em, 50dvh); overflow-y: auto; padding: 4px; margin: -4px; scrollbar-width: thin; } .cf-chips-track { position: relative; display: flex; flex-wrap: wrap; gap: 6px; } /* the wheel stays in the list; a touch swipe that reaches its end carries on to the page */ @media (pointer: fine) { .cf-chips { overscroll-behavior: contain; } } .cf-chips[data-fade="bottom"] { mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent); } .cf-chips[data-fade="top"] { mask-image: linear-gradient(to top, #000 calc(100% - 32px), transparent); } .cf-chips[data-fade="both"] { mask-image: linear-gradient(to bottom, transparent, #000 32px, #000 calc(100% - 32px), transparent); } .cf-root .cf-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 13px; border: 1px solid var(--_line); border-radius: var(--_pill); background: none; cursor: pointer; font-size: 13px; font-weight: 550; line-height: 1.25; isolation: isolate; transition: color 180ms ease, border-color 180ms ease; } .cf-chips[data-small] .cf-chip { min-height: 30px; padding: 4px 11px; font-size: 12.5px; font-variant-numeric: tabular-nums; } .cf-root .cf-chip:hover:not([aria-checked="true"]):not(:disabled) { border-color: color-mix(in oklab, var(--_ink) 26%, transparent); } /* the chosen chip: the pill and its ink copy draw it; until the pill is placed (server render) the chip fills itself */ .cf-root .cf-chip[aria-checked="true"] { border-color: transparent; } .cf-chips-track:not([data-ink-shown]) .cf-chip[aria-checked="true"] { color: var(--_surface); background: var(--_ink); } .cf-root .cf-chip:disabled { cursor: default; opacity: 0.6; } .cf-ink-pill { position: absolute; left: 0; top: 0; background: var(--_ink); pointer-events: none; } .cf-ink-copy { position: absolute; inset: 0; display: flex; flex-wrap: inherit; gap: inherit; align-items: inherit; align-content: inherit; justify-content: inherit; pointer-events: none; } .cf-ink-copy .cf-chip { color: var(--_surface); border-color: transparent; } .cf-chips-track:not([data-ink-shown]) > :is(.cf-ink-pill, .cf-ink-copy) { visibility: hidden; } .cf-chip-icon { display: inline-flex; flex: none; } .cf-chip-text { text-wrap: balance; overflow-wrap: anywhere; } /* fields */ .cf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } @container (min-width: 460px) { .cf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .cf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* one fixed line height: an error or hint appearing never changes the row's height */ .cf-label-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; min-height: 18px; line-height: 18px; } .cf-error { font-size: 12px; font-weight: 600; color: var(--_danger); text-wrap: pretty; } .cf-hint { font-size: 12px; color: var(--_muted); font-variant-numeric: tabular-nums; text-wrap: pretty; } .cf-hint[data-tone="warn"] { color: var(--_warn); font-weight: 600; } .cf-input { width: 100%; min-width: 0; min-height: 42px; padding: 10px 12px; border: 1px solid var(--_line); border-radius: calc(var(--_radius-sm) * 1.1); background: color-mix(in oklab, var(--_surface) 60%, transparent); color: var(--_ink); font: inherit; font-size: 14px; line-height: 1.4; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; box-sizing: border-box; } .cf-input::placeholder { color: color-mix(in oklab, var(--_ink) 38%, transparent); } .cf-input:hover:not(:disabled, :read-only) { border-color: color-mix(in oklab, var(--_ink) 24%, transparent); } .cf-root .cf-input:focus-visible { outline: none; border-color: var(--_ink); box-shadow: 0 0 0 3px color-mix(in oklab, var(--_accent) 22%, transparent); } .cf-input[aria-invalid="true"] { border-color: var(--_danger); } .cf-input:disabled, .cf-root[data-phase="sending"] .cf-input { opacity: 0.6; } .cf-input[data-auto] { background: color-mix(in oklab, var(--_ok) 6%, transparent); } .cf-with-icon { position: relative; display: block; } .cf-with-icon > svg { position: absolute; inset-inline-start: 12px; top: 50%; translate: 0 -50%; color: var(--_muted); pointer-events: none; } .cf-with-icon .cf-input { padding-inline-start: 36px; } .cf-message { resize: none; min-height: 112px; max-height: min(320px, 70dvh); overflow-y: auto; scroll-margin-block: 12px; } .cf-fail { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: calc(var(--_radius-sm) * 1.1); background: color-mix(in oklab, var(--_danger) 10%, transparent); color: color-mix(in oklab, var(--_danger) 82%, var(--_ink)); font-size: 13px; font-weight: 550; text-wrap: pretty; } .cf-fail svg { flex: none; margin-top: 2px; } .cf-fail span { min-width: 0; overflow-wrap: anywhere; } .cf-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; } .cf-root .cf-submit { display: inline-grid; place-items: center; max-width: 100%; min-height: 44px; padding: 8px 20px; border: 0; border-radius: calc(var(--_radius-sm) * 1.25); background: var(--_ink); color: var(--_surface); font-weight: 600; cursor: pointer; transition: scale 120ms ease, opacity 160ms ease, background-color 160ms ease; } .cf-root .cf-submit:active:not([aria-disabled]) { scale: 0.98; } .cf-root .cf-submit[aria-disabled] { cursor: progress; } @media (hover: hover) { .cf-root .cf-submit:hover:not([aria-disabled]) { background: color-mix(in oklab, var(--_ink) 86%, var(--_surface)); } } .cf-submit-stack { display: grid; } .cf-submit-stack > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; text-align: center; text-wrap: balance; overflow-wrap: anywhere; opacity: 0; translate: 0 6px; transition: opacity 180ms ease, translate 220ms var(--ui-ease-out, ease); } .cf-submit-stack > span[data-on] { opacity: 1; translate: 0 0; } .cf-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--_surface) 35%, transparent); border-top-color: var(--_surface); animation: cf-spin 700ms linear infinite; } .cf-submit:not([aria-busy]) .cf-spinner { animation: none; } .cf-submit-stack :is(svg, .cf-spinner) { flex: none; } @keyframes cf-spin { to { rotate: 1turn; } } .cf-reply { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; font-size: 12.5px; color: var(--_muted); text-wrap: pretty; overflow-wrap: anywhere; } .cf-reply svg, .cf-meta svg { flex: none; } /* sent */ .cf-sent:focus { outline: none; } .cf-sent { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px 0 2px; } .cf-check { color: var(--_ok); margin-bottom: 4px; } .cf-check :is(circle, path) { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .cf-sent-title { font-size: 17px; font-weight: 650; text-wrap: balance; overflow-wrap: anywhere; } .cf-sent-body { margin: 0; color: var(--_muted); text-wrap: pretty; overflow-wrap: anywhere; } .cf-summary { display: grid; gap: 0; width: 100%; margin: 12px 0 4px; padding: 7px 14px; border-radius: calc(var(--_radius-sm) * 1.25); background: var(--_soft); } .cf-row { display: grid; grid-template-columns: minmax(6em, 9em) minmax(0, 1fr); gap: 4px 14px; padding: 7px 0; } .cf-row dt { font-size: 12.5px; color: var(--_muted); } .cf-row dd { margin: 0; font-size: 13.5px; text-wrap: pretty; overflow-wrap: anywhere; white-space: pre-line; } .cf-row[data-long] dd { max-height: 9em; overflow-y: auto; } @container (max-width: 380px) { .cf-row { grid-template-columns: minmax(0, 1fr); } } .cf-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--_muted); } .cf-meta span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; text-wrap: pretty; overflow-wrap: anywhere; } .cf-ref { font-family: var(--ui-font-mono, ui-monospace, monospace); font-size: 12px; } .cf-root .cf-ghost { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; min-height: 38px; padding: 0 14px; border: 1px solid var(--_line); border-radius: calc(var(--_radius-sm) * 1.25); background: none; font-weight: 600; font-size: 13px; cursor: pointer; } .cf-root .cf-ghost:hover { background: var(--_soft); } /* touch: 44px targets; the desktop look is unchanged */ @media (pointer: coarse) { .cf-root .cf-chip, .cf-root .cf-chips[data-small] .cf-chip, .cf-root .cf-ghost { min-height: 44px; } .cf-root .cf-chip { min-width: 44px; justify-content: center; } .cf-root .cf-draft button::before { content: ''; position: absolute; inset: -11px -4px; } .cf-input { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .cf-submit-stack > span { transition: opacity 120ms ease; translate: none; } } ` export default ContactForm 62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],null]}],["$","$L64",null,{"files":[{"path":"src/components/contact-form/contact-form.tsx","content":"$65","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}] </article></body></html>