@evinvest/kitstart 0.13.0 → 0.15.0

package/dist/react/AbSwitcher.d.ts

@@ -0,0 +1,9 @@
+import type { AbSwitcherProps } from "./ab-switcher-types.js";
+/**
+ * The QA menu's gate: everything a visitor downloads for it. On the server and
+ * on the first client render it is nothing — the page stays static, no cookie
+ * is read there — and after mount it loads the panel only outside production
+ * or for a visit carrying the QA cookie. Nothing heavy is imported here: the
+ * panel and the kit come with the dynamic import, in their own chunk.
+ */
+export declare function AbSwitcher(props: AbSwitcherProps): import("react").JSX.Element | null;

package/dist/react/AbSwitcher.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { abSwitcherVisible } from "../core/ab-gate.js";
+/**
+ * The QA menu's gate: everything a visitor downloads for it. On the server and
+ * on the first client render it is nothing — the page stays static, no cookie
+ * is read there — and after mount it loads the panel only outside production
+ * or for a visit carrying the QA cookie. Nothing heavy is imported here: the
+ * panel and the kit come with the dynamic import, in their own chunk.
+ */
+export function AbSwitcher(props) {
+    const [Panel, setPanel] = useState(null);
+    const { qaCookie } = props;
+    useEffect(() => {
+        if (!abSwitcherVisible(document.cookie, qaCookie, process.env.NODE_ENV))
+            return;
+        // An answer after unmount is dropped by React; no flag to carry.
+        void import("./AbSwitcherPanel.js").then(m => setPanel(() => m.AbSwitcherPanel));
+    }, [qaCookie]);
+    return Panel ? _jsx(Panel, { ...props }) : null;
+}

package/dist/react/AbSwitcherPanel.d.ts

@@ -0,0 +1,8 @@
+import type { AbSwitcherProps } from "./ab-switcher-types.js";
+/**
+ * The QA menu itself, loaded only when `AbSwitcher` lets it: a chip in a
+ * corner and, on a tap, each experiment's variants. A tap on a variant is the
+ * brand's own force parameter — no other way in. Minimized and hidden live in
+ * memory only: a reload brings the chip back.
+ */
+export declare function AbSwitcherPanel({ experiments, qaCookie, current, forceParam, className, text }: AbSwitcherProps): import("react").JSX.Element | null;

package/dist/react/AbSwitcherPanel.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, cn } from "@evinvest/uikit";
+import { useEffect, useRef, useState } from "react";
+import { abAssignments, abReset, abVariantUrl, AB_FORCE_PARAM } from "../core/ab-switcher.js";
+const TEXT = {
+    title: "A/B test switcher",
+    reset: "Reset",
+    leave: "Leave test",
+    minimize: "Minimize",
+    hide: "Hide",
+    unassigned: "not assigned",
+};
+/**
+ * The QA menu itself, loaded only when `AbSwitcher` lets it: a chip in a
+ * corner and, on a tap, each experiment's variants. A tap on a variant is the
+ * brand's own force parameter — no other way in. Minimized and hidden live in
+ * memory only: a reload brings the chip back.
+ */
+export function AbSwitcherPanel({ experiments, qaCookie, current, forceParam = AB_FORCE_PARAM, className, text }) {
+    const t = { ...TEXT, ...text };
+    const keys = experiments.map(e => e.key);
+    const [assigned] = useState(() => current ?? abAssignments(document.cookie, keys));
+    const [open, setOpen] = useState(false);
+    const [minimized, setMinimized] = useState(false);
+    const [hidden, setHidden] = useState(false);
+    const root = useRef(null);
+    const chip = useRef(null);
+    const close = (refocus) => {
+        setOpen(false);
+        if (refocus)
+            chip.current?.focus();
+    };
+    useDismiss(open, root, close);
+    const reset = (mode) => {
+        const plan = abReset(location.href, keys, qaCookie, mode, forceParam);
+        for (const c of plan.cookies)
+            document.cookie = c;
+        location.replace(plan.url);
+    };
+    if (hidden)
+        return null;
+    return (_jsxs("div", { "data-ab-switcher": "", ref: root, className: cn("fixed right-4 bottom-4 z-40", className), children: [open && (_jsxs("div", { role: "dialog", "aria-label": t.title, className: "absolute right-0 bottom-full mb-2 flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-4 rounded-md border border-border bg-popover p-3 text-ink shadow-md", children: [experiments.map((e, i) => (_jsx(ExperimentRow, { experiment: e, value: assigned[e.key], unassigned: t.unassigned, autoFocus: i === 0, onPick: v => location.assign(abVariantUrl(location.href, e.key, v, forceParam)) }, e.key))), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: "primary", size: "touch", className: "flex-1", onClick: () => reset("reassign"), children: t.reset }), _jsx(Button, { variant: "outline", size: "touch", className: "flex-1", onClick: () => reset("leave"), children: t.leave })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "ghost", size: "touch", className: "flex-1", onClick: () => { setMinimized(true); close(true); }, children: t.minimize }), _jsx(Button, { variant: "ghost", size: "touch", className: "flex-1", onClick: () => setHidden(true), children: t.hide })] })] })), _jsxs(Button, { ref: chip, variant: "secondary", size: "touch", icon: minimized, "aria-label": t.title, "aria-expanded": open, className: cn("shadow-md", !minimized && "gap-1.5 px-3"), onClick: () => { if (open)
+                    close(false);
+                else {
+                    setOpen(true);
+                    setMinimized(false);
+                } }, children: [_jsx("span", { className: "font-semibold", children: "A/B" }), !minimized && keys.map(k => _jsx(Badge, { variant: "outline", className: "border-current/40 text-current", children: assigned[k] ?? "–" }, k))] })] }));
+}
+/**
+ * Escape closes and gives the focus back to the chip; a tap outside closes.
+ * Not the kit's `Popover`: sharing its primitives with the page makes
+ * Turbopack re-split the page's chunks, ~400 B gz on every visitor's first
+ * load for a menu almost nobody opens. The panel is not portaled — the chip's
+ * fixed corner is its anchor — so the root holds both.
+ */
+function useDismiss(open, root, close) {
+    useEffect(() => {
+        if (!open)
+            return;
+        const key = (e) => e.key === "Escape" && close(true);
+        const down = (e) => !(e.target instanceof Node && root.current?.contains(e.target)) && close(false);
+        document.addEventListener("keydown", key);
+        document.addEventListener("pointerdown", down, true);
+        return () => {
+            document.removeEventListener("keydown", key);
+            document.removeEventListener("pointerdown", down, true);
+        };
+    }, [open, root, close]);
+}
+function ExperimentRow({ experiment: e, value, unassigned, autoFocus, onPick }) {
+    const labelId = `ab-switcher-${e.key}`;
+    return (_jsxs("div", { role: "group", "aria-labelledby": labelId, className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2 text-sm", children: [_jsx("span", { id: labelId, className: "font-medium text-ink", children: e.label ?? e.key }), value === undefined && _jsx("span", { className: "text-xs text-ink-soft", children: unassigned })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: e.variants.map((v, i) => {
+                    const on = v.value === value;
+                    return (_jsx(Button, { variant: on ? "primary" : "outline", size: "touch", "aria-pressed": on, autoFocus: autoFocus && i === 0, className: "flex-1", onClick: () => onPick(v.value), children: v.label }, v.value));
+                }) })] }));
+}

package/dist/react/FormSelect.d.ts

@@ -22,6 +22,12 @@ export interface FormSelectProps {
     options: readonly FormSelectOption[];
     /** Without it: empty under a `placeholder`, else the first option — a native select's own rule. */
     defaultValue?: string | undefined;
+    /**
+     * Controlled: the value shown and posted, kept until the parent changes it
+     * from `onValueChange` (a form reset leaves it too). `undefined` is
+     * uncontrolled, as on an `<input>`; `""` is the placeholder.
+     */
+    value?: string | undefined;
     /** An empty, unpickable choice shown until one is made. */
     placeholder?: string | undefined;
     required?: boolean | undefined;

package/dist/react/FormSelect.js

@@ -26,11 +26,14 @@ export function FormSelectView({ scripted, ...props }) {
     const native = useRef(null);
     // The box, not the trigger: `SelectTrigger` keeps its own ref for placing the list.
     const box = useRef(null);
-    const state = useFormSelectValue({ initial, native, box, scripted, onValueChange: props.onValueChange });
+    const state = useFormSelectValue({ initial, controlled: props.value, native, box, scripted, onValueChange: props.onValueChange });
     const hint = placeholder !== undefined ? { placeholder } : {};
     const aria = { "aria-describedby": props["aria-describedby"], "aria-invalid": props["aria-invalid"] || state.invalid || undefined };
     if (!scripted) {
-        return (_jsx(NativeSelect, { ref: native, name: name, id: id, size: size, ...hint, required: required, disabled: disabled, defaultValue: initial, wrapperClassName: cn(BOX, className), className: classNames?.trigger, ...aria, children: options.map(o => (_jsx(NativeSelectOption, { value: o.value, children: o.label }, o.value))) }));
+        return (_jsx(NativeSelect, { ref: native, name: name, id: id, size: size, ...hint, required: required, disabled: disabled, 
+            // Uncontrolled even under `value`: before the script nothing could
+            // follow a change, and a pick made then must survive into the swap.
+            defaultValue: state.value, wrapperClassName: cn(BOX, className), className: classNames?.trigger, ...aria, children: options.map(o => (_jsx(NativeSelectOption, { value: o.value, children: o.label }, o.value))) }));
     }
     return (_jsxs("span", { ref: box, "data-slot": "form-select", className: cn(BOX, className), children: [_jsxs(Select, { value: state.value, onValueChange: state.choose, open: state.open, onOpenChange: state.setOpen, children: [_jsx(SelectTrigger, { id: id, size: size, disabled: disabled, "aria-required": required || undefined, className: cn(TRIGGER, TRIGGER_TEXT[size], classNames?.trigger), ...aria, children: _jsx(SelectValue, { ...hint }) }), _jsx(SelectContent, { className: classNames?.content, children: options.map(o => (_jsx(SelectItem, { value: o.value, className: cn(size === "lg" && "py-2.5 text-base", classNames?.item), children: o.label }, o.value))) })] }), required ? (
             // Validated, so not `type="hidden"` (which the browser never checks);

package/dist/react/LeadCapture.d.ts

@@ -5,17 +5,19 @@ import { type LeadCaptureText } from "../core/lead-capture-text.js";
 import { type Place } from "../core/place/types.js";
 import { type LeadFlows } from "../core/pricing/flow.js";
 import type { PricingModel } from "../core/pricing/model.js";
-import type { FormSelectOption } from "./FormSelect.js";
 import type { BookingAdapters } from "./booking-adapters.js";
 import type { BookingPart } from "./LeadBookingManual.js";
 import { type PricedPart } from "./LeadCapturePriced.js";
-import { type ChannelPart, type Experiment } from "./LeadCaptureChannels.js";
-import { type EstimatePart } from "./LeadCaptureEstimate.js";
+import { type ChannelIconKey, type ChannelPart, type Experiment } from "./LeadCaptureChannels.js";
+import { type EstimatePart, type EstimateQuestions } from "./LeadCaptureEstimate.js";
 import { type FieldPart } from "./LeadCaptureFields.js";
-import { type LeadCaptureLayout } from "./LeadCaptureNeed.js";
+import { type LeadCaptureLayout, type LeadNeedDisplay, type LeadNeedOption } from "./LeadCaptureNeed.js";
+import { type PricePart } from "./LeadCapturePrice.js";
+import { type StepsPart } from "./LeadCaptureSteps.js";
+import { type LeadIntro } from "./lead-steps.js";
 import type { PartClassNames } from "./parts.js";
 import { type LeadSent } from "./use-lead-submit.js";
-export type LeadCapturePart = "root" | "head" | "title" | "lede" | "form" | "contact" | "submit" | "trust" | "privacy" | "opening" | "others" | "done" | "needs" | "need" | "summary" | FieldPart | ChannelPart | EstimatePart | PricedPart | BookingPart;
+export type LeadCapturePart = "root" | "head" | "title" | "lede" | "form" | "contact" | "submit" | "trust" | "privacy" | "opening" | "others" | "done" | "needs" | "need" | "summary" | "icon" | "intro" | "introOption" | "stepNext" | FieldPart | ChannelPart | EstimatePart | PricePart | StepsPart | PricedPart | BookingPart;
 export interface LeadCaptureProps {
     /** Its hours order the channels; its service area suggests the commune. */
     place: Place<string>;
@@ -29,8 +31,8 @@ export interface LeadCaptureProps {
     renderedAt: number;
     /** `site.lead.wire`: the names the funnel reads. */
     wire: LeadWire;
-    /** The brand's subjects with their labels, in order. */
-    needs: readonly FormSelectOption[];
+    /** The brand's subjects with their labels, in order — and an icon each for `needDisplay="cards"`. */
+    needs: readonly LeadNeedOption[];
     /**
      * How each need is sold — `site.lead.flows`, the map the server prices
      * with. A need runs `estimate` or `fixed` only when `pricing` prices it so
@@ -71,8 +73,34 @@ export interface LeadCaptureProps {
     bookingEmbed?: boolean | undefined;
     /** The need the page already knows; `?need=` and `[data-need]` triggers set it too. */
     need?: string | undefined;
-    /** `single` (one screen) or `qualify-first` (the need, then the contact) — an experiment's switch. */
+    /**
+     * `single` (one screen, the default) · `steps` (one question per screen, a
+     * thin bar, a way back, the phone last) · `qualify-first` (the two screens
+     * `steps` grew from: the need, then the contact) — an experiment's switch.
+     */
     layout?: LeadCaptureLayout | undefined;
+    /** How the need is asked: `select` (default on one screen), `tiles` (default otherwise), `cards` with the `icon` of each need. */
+    needDisplay?: LeadNeedDisplay | undefined;
+    /**
+     * `steps` only: a question before the need whose answer is posted as one of
+     * the brand's extras (`field`) and may change the channel — `callback`:
+     * the rest is the phone and its consent, posted as a callback.
+     */
+    intro?: LeadIntro | undefined;
+    /** `steps` only: the postcode on a screen of its own (default), or on the phone's. */
+    localityStep?: "own" | "with-phone" | undefined;
+    /**
+     * After a choice (the need, an estimate's answer) the focus moves to the
+     * next empty field, and Enter in a field moves to the next empty one before
+     * it submits. Always so in `steps`; off by default on one screen.
+     */
+    focusNext?: boolean | undefined;
+    /** By estimate input id: how a question is asked — `cards` with the total each answer makes, an "I don't know", badges. */
+    questions?: EstimateQuestions | undefined;
+    /** `box` (default): the price box. `compact`: one line, a tax-credit line with `taxCredit`, the breakdown behind "Détail". */
+    price?: "box" | "compact" | undefined;
+    /** `price="compact"`: the share of the price a tax credit gives back (0.5 for half), shown as what is left to pay. */
+    taxCredit?: number | undefined;
     locality?: "required" | "optional" | undefined;
     /** A name field, posted as the brand's extra `field`. Off by default: every field costs leads. */
     name?: {
@@ -81,6 +109,12 @@ export interface LeadCaptureProps {
     } | undefined;
     /** The brand's extra fields, after the phone — never before it. */
     extras?: ReactNode;
+    /** Right under the phone field: one short line of reassurance ("Votre numéro reste entre nous"). */
+    afterPhone?: ReactNode;
+    /** The other ways out: `stack` (default), under a heading, or `row`, one row of compact buttons. */
+    channelsDisplay?: "stack" | "row" | undefined;
+    /** The brand's icon before a channel's label, by channel. */
+    channelIcons?: Partial<Record<ChannelIconKey, ReactNode>> | undefined;
     /** Moved first when available — a `default_channel` experiment's arm. */
     prefer?: CaptureChannel | undefined;
     /** The site's assignment: on every event, and posted with the form. Slugs only. */

package/dist/react/LeadCapture.js

@@ -1,25 +1,31 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "@evinvest/uikit";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, cn } from "@evinvest/uikit";
 import { Fragment, useEffect, useRef, useState } from "react";
 import { PRICE_CHANGED, SHOWN_CENTS_FIELD } from "../core/accept.js";
 import { resolveChannels } from "../core/channels.js";
-import { leadErrorFor } from "../core/lead.js";
+import { CHANNEL_FIELD, leadErrorFor } from "../core/lead.js";
 import { fillText, openingText } from "../core/lead-capture-format.js";
 import { flowTextOf } from "../core/lead-capture-text.js";
 import { bookingOf } from "../core/booking/model.js";
 import { servedLocalities, storefrontOf } from "../core/place/types.js";
-import { flowOf } from "../core/pricing/flow.js";
+import { ESTIMATE_UNKNOWN, estimateField, flowOf } from "../core/pricing/flow.js";
+import { labelOf } from "../core/pricing/validate.js";
+import { focusNext } from "./focus-next.js";
 import { LeadBooking } from "./LeadBooking.js";
 import { LeadCapturePriced } from "./LeadCapturePriced.js";
 import { CallbackForm, ChannelLink, ExperimentFields, PhotosAsk } from "./LeadCaptureChannels.js";
-import { EstimateInputs, PriceBox, useEstimate } from "./LeadCaptureEstimate.js";
-import { FormMessage, LocalityField, NameField, PhoneField } from "./LeadCaptureFields.js";
+import { askedInputs, EstimateInputs, EstimateQuestionField, estimatePlan, screensOf, useEstimate } from "./LeadCaptureEstimate.js";
+import { ConsentField, FormMessage, LocalityField, NameField, PhoneField } from "./LeadCaptureFields.js";
 import { NeedField } from "./LeadCaptureNeed.js";
+import { PriceBox, PriceCompact } from "./LeadCapturePrice.js";
+import { IntroField, LeadSteps } from "./LeadCaptureSteps.js";
+import { stepOfField, stepsOf, useLeadSteps } from "./lead-steps.js";
 import { QuoteFormShell } from "./QuoteFormShell.js";
-import { useHeld, useHydrated, useNeed, useNow, useOpenOnHash } from "./use-lead-context.js";
+import { useHeld, useHydrated, useNeed, useNow, useOpenOnHash, usePostcode } from "./use-lead-context.js";
 import { errorText, formMessageId, OWN_FIELDS, useLeadError } from "./use-lead-error.js";
 import { useLeadEvents } from "./use-lead-events.js";
+import { useLeadFocus } from "./use-lead-focus.js";
 import { FailureMessage, SubmitButton } from "./LeadCaptureSubmit.js";
 import { useLeadSubmit } from "./use-lead-submit.js";
 import { useRepriced } from "./use-repriced.js";
@@ -42,10 +48,22 @@ export function LeadCapture(props) {
     const { place, contact, locale, renderedAt, wire, needs, layout = "single", text } = props;
     const { formId = "quote", id = "quote", experiment } = props;
     const c = props.labels === "hidden" ? { ...props.classNames, label: cn("sr-only", props.classNames?.label) } : props.classNames;
+    const steps = layout === "steps";
+    const needDisplay = props.needDisplay ?? (layout === "single" ? "select" : "tiles");
+    // Enter on a tile answers it wherever an answer moves the visitor on.
+    const enterPicks = layout !== "single" || props.focusNext === true;
     const root = useRef(null);
+    const formRef = () => root.current?.querySelector(`#${CSS.escape(`${id}-form`)}`) ?? null;
     const hydrated = useHydrated();
     const [editing, setEditing] = useState(false);
     const [need, setNeed] = useNeed(props.need, needs.map(n => n.value), () => setEditing(false));
+    const [introValue, setIntro] = useState(undefined);
+    const intro = steps ? props.intro : undefined;
+    const callbackPreset = intro?.options.find(o => o.value === introValue)?.channel === "callback";
+    const served = localitySuggestions(place);
+    const postcode = usePostcode();
+    const [locality, setLocality] = useState(undefined);
+    const localityShown = locality ?? postcode ?? (served.length === 1 ? served[0] : undefined);
     const events = useLeadEvents(root, { formId, layout, experiment });
     useOpenOnHash(`${id}-callback`);
     // Only this card's: a page may draw several, and the query names one.
@@ -53,24 +71,27 @@ export function LeadCapture(props) {
     const [error, setError] = useLeadError(root, id, initial);
     const flowText = flowTextOf(text, locale);
     // `single` shows its select at the first need until one is picked: that is the need on screen.
-    const shownNeed = need ?? (layout === "single" ? needs[0]?.value : undefined);
+    const shownNeed = need ?? (layout === "single" && needDisplay === "select" ? needs[0]?.value : undefined);
     const model = props.pricing ?? null;
-    const flow = flowOf(props.flows, model, shownNeed);
-    const estimate = useEstimate(model, shownNeed, flow, events.estimateShown);
+    const wanted = flowOf(props.flows, model, shownNeed);
+    const estimate = useEstimate(model, shownNeed, wanted, events.estimateShown);
+    const flow = estimate.flow;
     const repriced = useRepriced(estimate.price, shownNeed, flowText, locale);
     // A priced lead stays in the card: its price is confirmed there, and the slot promised.
     const staysInCard = (ch) => props.done !== undefined || (ch === "form" && flow !== "quote");
     const { sent, onSubmit, busy, failure, retry } = useLeadSubmit(staysInCard, { mobile: wire.mobile, name: props.name?.field }, {
         onRefused: (channel, field, cents) => {
             repriced.refused(field, cents);
-            setError({ channel, field });
+            // The intro's callback is this form's: its refusal shows here, not in the folded callback.
+            setError({ channel: callbackPreset ? "form" : channel, field });
         },
         onFailed: (channel, why) => events.submitError(why, channel),
     });
     // The form's refusal by where it shows: under the field the card draws, else above the submit.
     const formError = error?.channel === "form" ? error.field : null;
     const at = (field) => (formError === field ? errorText(field, text) : null);
-    const above = formError === PRICE_CHANGED ? repriced.message() : formError !== null && !OWN_FIELDS.form.includes(formError) ? errorText(formError, text) : null;
+    const drawn = (field) => OWN_FIELDS.form.includes(field) || (callbackPreset && field === "consent");
+    const above = formError === PRICE_CHANGED ? repriced.message() : formError !== null && !drawn(formError) ? errorText(formError, text) : null;
     const doneRef = useRef(null);
     // The form the focus was in is gone: the news takes it, and is read out.
     useEffect(() => doneRef.current?.focus(), [sent]);
@@ -82,11 +103,32 @@ export function LeadCapture(props) {
     const message = needLabel ? fillText(text.message, { need: needLabel }) : text.messageGeneric;
     const [lead = "form", ...rest] = resolved.order;
     const links = rest.filter((ch) => ch !== "form" && ch !== "callback");
-    const pick = (value) => {
+    // The intro asked for a call back: the folded callback would be a second one.
+    const callbackElsewhere = !callbackPreset;
+    const asked = model && shownNeed !== undefined && wanted === "estimate" ? askedInputs(model, shownNeed, estimate.answers) : [];
+    const screens = screensOf(asked.map(i => i.id), props.questions);
+    const stepIds = steps ? stepsOf({ intro: intro !== undefined, callback: callbackPreset, estimate: screens, localityOwn: props.localityStep !== "with-phone" }) : [];
+    const screenOf = (step) => screens.find(screen => screen[0] !== undefined && estimateField(screen[0]) === step) ?? [];
+    // The bar counts the most screens an answer to come could add — the need's
+    // longest estimate — so it never moves back; until the intro picks its branch, no total is said.
+    const longest = Math.max(0, ...needs.map(n => (model && flowOf(props.flows, model, n.value) === "estimate" ? screensOf(estimatePlan(model, n.value), props.questions).length : 0)));
+    const total = intro !== undefined && introValue === undefined ? null : stepIds.length + (need === undefined && !callbackPreset ? longest : 0);
+    const answered = (step) => step === "intro" ? introValue !== undefined : step === "need" ? need !== undefined : step === "locality" ? localityShown !== undefined : step === "phone" ? false : screenOf(step).every(id => estimate.answers[id] !== undefined);
+    const stepper = useLeadSteps(stepIds, answered, steps && formError !== null ? stepOfField(stepIds, formError, screens) : null, events.step);
+    const { moveOn, focusAfterSelect } = useLeadFocus(formRef, { steps, focusNext: props.focusNext === true, current: stepper.current });
+    const pick = (value, from) => {
+        // A need that brings an estimate's questions brings screens React has yet to draw.
+        const brings = flowOf(props.flows, model, value) === "estimate";
+        if (steps)
+            return moveOn(() => (setNeed(value), stepper.next()), from, !brings && asked.length === 0);
         if (layout === "single") {
-            setNeed(value);
-            setEditing(true);
-            return;
+            if (from === null) {
+                setNeed(value);
+                setEditing(true);
+                focusAfterSelect();
+                return;
+            }
+            return moveOn(() => (setNeed(value), setEditing(true)), from, !brings && asked.length === 0);
         }
         // The checked radio has already shown the contact step (`:has`, below), so
         // the first empty field — the postcode unless filled, else the phone —
@@ -99,23 +141,126 @@ export function LeadCapture(props) {
         setEditing(false);
         events.step("contact");
     };
-    // An arrow key in `qualify-first`: the tile is chosen, the group stays open.
+    // An arrow key among the tiles: the tile is chosen, the group stays open.
     const select = (value) => {
         setNeed(value);
         setEditing(true);
     };
-    const channel = (ch, primary) => ch === "callback" ? (_jsx(CallbackForm, { id: `${id}-callback`, card: id, primary: primary, open: initial?.channel === "callback" || (props.callbackOpen ?? primary), formId: formId, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, mobileName: wire.mobile, subject: need ? { name: wire.subject, value: need } : null, opening: opening, text: text, experiment: experiment, onSubmit: onSubmit, error: error?.channel === "callback" ? { field: error.field, text: errorText(error.field, text) } : null, busy: busy === "callback", failure: failure?.channel === "callback" ? failure.failure : null, onRetry: retry, onSoftError: () => events.fieldError("phone"), classNames: c }, ch)) : ch === "form" ? null : (_jsx(ChannelLink, { channel: ch, contact: contact, message: message, text: text, primary: primary, experiment: experiment, classNames: c }, ch));
-    // `qualify-first` shows the contact step as soon as a need's radio is
-    // checked (`:has`) — without a script, and inside the tap with one.
-    const contactShown = layout === "single" || (need !== undefined && !editing);
-    const contactClass = contactShown ? "flex" : "hidden group-has-[[data-need-option]:checked]/lead:flex";
+    // "I don't know", or an answer instead of it, changes which questions are asked.
+    // On a screen shared by a few questions, the last one answered moves on; until then the screen stays.
+    const answerPicked = (input, option, radio) => {
+        const screen = steps ? screenOf(stepper.current) : [];
+        const complete = screen.every(id => id === input || option === ESTIMATE_UNKNOWN || estimate.answers[id] !== undefined);
+        moveOn(() => (estimate.answer(input, option), steps && (complete ? stepper.next() : stepper.edit(stepper.current))), radio, option !== ESTIMATE_UNKNOWN && estimate.answers[input] !== ESTIMATE_UNKNOWN);
+    };
+    /** A shared screen's button: on when every question is answered, else the first one unanswered says so. */
+    const continueScreen = (screen) => {
+        const missing = screen.find(id => estimate.answers[id] === undefined);
+        const radio = missing === undefined ? null : formRef()?.querySelector(`input[name="${estimateField(missing)}"]`);
+        if (radio)
+            return void radio.reportValidity();
+        moveOn(stepper.next, null, false);
+    };
+    const continueLocality = () => {
+        const el = formRef()?.querySelector('[data-lead-step="locality"] [data-lead-field="locality"]');
+        if (!el?.reportValidity())
+            return;
+        moveOn(() => (setLocality(el.value.trim()), stepper.next()), el, true);
+    };
+    // Enter in a typed field: the next empty field, or the next screen, before the submit.
+    const onKeyDown = (e) => {
+        const field = e.target;
+        if (e.key !== "Enter" || !(steps || props.focusNext) || !(field instanceof HTMLInputElement) || ["radio", "checkbox", "submit", "button"].includes(field.type))
+            return;
+        if (focusNext(e.currentTarget, field))
+            e.preventDefault();
+        else if (steps && stepper.current === "locality") {
+            e.preventDefault();
+            continueLocality();
+        }
+    };
+    const channel = (ch, primary) => ch === "callback" ? (_jsx(CallbackForm, { id: `${id}-callback`, card: id, primary: primary, open: initial?.channel === "callback" || (props.callbackOpen ?? primary), formId: formId, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, mobileName: wire.mobile, subject: need ? { name: wire.subject, value: need } : null, opening: opening, text: text, experiment: experiment, onSubmit: onSubmit, error: error?.channel === "callback" ? { field: error.field, text: errorText(error.field, text) } : null, busy: busy === "callback", failure: failure?.channel === "callback" ? failure.failure : null, onRetry: retry, onSoftError: () => events.fieldError("phone"), row: !primary && props.channelsDisplay === "row", icon: props.channelIcons?.callback, classNames: c }, ch)) : ch === "form" ? null : (_jsx(ChannelLink, { channel: ch, contact: contact, message: message, text: text, primary: primary, experiment: experiment, icon: props.channelIcons?.[ch], classNames: c }, ch));
     const rootProps = { id, className: cn("flex w-full flex-col gap-6", props.className, c?.root), "data-experiment": experiment?.name, "data-variant": experiment?.variant };
     if (sent && staysInCard(sent.channel)) {
         const done = typeof props.done === "function" ? props.done(sent) : props.done;
         return (_jsx("div", { ref: root, ...rootProps, children: _jsxs("div", { ref: doneRef, role: "status", tabIndex: -1, className: cn("flex flex-col gap-4 outline-none", c?.done), children: [_jsx(Fragment, { children: done }, "done"), sent.channel === "form" && flow !== "quote" && (_jsx(LeadCapturePriced, { sent: sent, booking: props.booking === undefined ? (_jsx(LeadBooking, { booking: bookingOf(place, props.bookingVariant), sent: sent, locale: locale, text: flowText, adapters: props.bookingAdapters, embed: props.bookingEmbed, formId: formId, classNames: c })) : typeof props.booking === "function" ? (props.booking(sent)) : (props.booking), locale: locale, text: flowText, classNames: c }))] }) }));
     }
-    return (_jsxs("div", { ref: root, ...rootProps, children: [_jsx(Fragment, { children: props.head ?? (_jsxs("div", { className: cn("flex flex-col gap-1", c?.head), children: [_jsx("p", { className: cn("font-display text-2xl font-bold text-ink", c?.title), children: text.title }), _jsx("p", { className: cn("text-ink-soft", c?.lede), children: text.lede })] })) }, "head"), lead !== "form" && channel(lead, true), _jsxs(QuoteFormShell, { id: `${id}-form`, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, honeypotLabel: text.honeypotLabel, formId: formId, card: id, onSubmit: onSubmit, className: cn("group/lead", c?.form), children: [_jsx(ExperimentFields, { experiment: experiment }), _jsx(NeedField, { layout: layout, name: wire.subject, needs: needs, need: need, editing: editing, hydrated: hydrated, label: text.needLabel, changeLabel: text.needChange, requiredText: text.needRequired, onPick: pick, onSelect: select, onEdit: () => {
-                            setEditing(true);
-                            events.step("need");
-                        }, classNames: c }), _jsxs("div", { className: cn("flex-col gap-5", contactClass, c?.contact), children: [model && shownNeed !== undefined && flow === "estimate" && (_jsx(EstimateInputs, { model: model, need: shownNeed, locale: locale, answers: estimate.answers, onAnswer: estimate.answer, required: hydrated, classNames: c })), model && flow !== "quote" && _jsx(PriceBox, { model: model, flow: flow, price: repriced.price, locale: locale, text: flowText, classNames: c }), flow !== "quote" && repriced.shownCents !== undefined && _jsx("input", { type: "hidden", name: SHOWN_CENTS_FIELD, value: repriced.shownCents }), flow === "quote" && shownNeed !== undefined && props.photos?.includes(shownNeed) && (_jsx(PhotosAsk, { whatsapp: contact.whatsapp, needLabel: needs.find(n => n.value === shownNeed)?.label ?? shownNeed, text: flowText, experiment: experiment, className: c?.photos })), _jsx(LocalityField, { name: wire.locality, label: text.localityLabel, servedLabel: text.servedLabel, served: localitySuggestions(place), placeholder: text.localityPlaceholder, required: props.locality !== "optional", optional: text.optional, requiredText: text.required, error: at("locality"), hydrated: hydrated, classNames: c }), _jsx(PhoneField, { name: wire.mobile, text: text, error: at("phone"), onSoftError: () => events.fieldError("phone"), classNames: c }), props.name && (_jsx(NameField, { name: props.name.field, label: text.nameLabel, placeholder: text.namePlaceholder, required: props.name.required ?? false, optional: text.optional, requiredText: text.required, error: at("name"), classNames: c })), _jsx(Fragment, { children: props.extras }, "extras"), _jsx(FormMessage, { id: formMessageId(id, "form"), error: above, className: c?.error }), _jsx(FailureMessage, { failure: failure?.channel === "form" ? failure.failure : null, text: text, onRetry: retry, className: c?.error }), _jsxs("div", { className: cn("flex flex-col gap-3", c?.trust), children: [_jsx(SubmitButton, { busy: busy === "form", label: flow === "quote" ? text.submit : flowText.bookSubmit, sending: text.sending, className: c?.submit }), _jsx(Fragment, { children: props.trust }, "trust")] }), opening && lead !== "callback" && _jsx("p", { className: cn("text-sm text-ink-soft", c?.opening), children: opening }), _jsx("p", { className: cn("text-sm text-ink-soft", c?.privacy), children: text.privacy })] })] }), (links.length > 0 || rest.includes("callback")) && (_jsxs("div", { className: cn("flex flex-col gap-3", c?.others), children: [_jsx("p", { className: "text-sm font-medium text-ink", children: text.otherChannels }), links.length > 0 && _jsx("div", { className: "flex flex-wrap gap-2", children: links.map(ch => channel(ch, false)) }), rest.includes("callback") && channel("callback", false)] }))] }));
+    // An arrow key in `steps`: chosen, and the screen stays on until the answer is given.
+    const stay = (choose) => (...args) => {
+        if (steps)
+            stepper.edit(stepper.current);
+        choose(...args);
+    };
+    const estimateProps = { locale, answers: estimate.answers, unknownLabel: flowText.estimateUnknown, required: hydrated, enterPicks, onPick: answerPicked, onSelect: stay(estimate.answer), classNames: c };
+    const priceShown = model && flow !== "quote" && (props.price === "compact" ? (_jsx(PriceCompact, { model: model, flow: flow, price: repriced.price, locale: locale, taxCredit: props.taxCredit, text: flowText, classNames: c })) : (_jsx(PriceBox, { model: model, flow: flow, price: repriced.price, locale: locale, text: flowText, classNames: c })));
+    const photos = flow === "quote" && shownNeed !== undefined && props.photos?.includes(shownNeed) && !callbackPreset && (_jsx(PhotosAsk, { whatsapp: contact.whatsapp, needLabel: needs.find(n => n.value === shownNeed)?.label ?? shownNeed, text: flowText, experiment: experiment, className: c?.photos }));
+    const localityField = (_jsx(LocalityField
+    // Remounted with what the query knew: an untouched field takes it as typed.
+    , { name: wire.locality, label: text.localityLabel, servedLabel: text.servedLabel, served: served, placeholder: text.localityPlaceholder, required: props.locality !== "optional", optional: text.optional, requiredText: text.required, error: at("locality"), hydrated: hydrated, preset: postcode, classNames: c }, postcode ?? ""));
+    const phone = (_jsxs(_Fragment, { children: [_jsx(PhoneField, { name: wire.mobile, text: text, error: at("phone"), onSoftError: () => events.fieldError("phone"), classNames: c }), _jsx(Fragment, { children: props.afterPhone }, "afterPhone")] }));
+    const nameField = props.name && (_jsx(NameField, { name: props.name.field, label: text.nameLabel, placeholder: text.namePlaceholder, required: props.name.required ?? false, optional: text.optional, requiredText: text.required, error: at("name"), classNames: c }));
+    const mainBusy = busy === "form" || (callbackPreset && busy === "callback");
+    const mainFailure = failure && (failure.channel === "form" || callbackPreset) ? failure.failure : null;
+    const tail = (_jsxs(_Fragment, { children: [_jsx(FormMessage, { id: formMessageId(id, "form"), error: above, className: c?.error }), _jsx(FailureMessage, { failure: mainFailure, text: text, onRetry: retry, className: c?.error }), _jsxs("div", { className: cn("flex flex-col gap-3", c?.trust), children: [_jsx(SubmitButton, { busy: mainBusy, label: callbackPreset ? text.callbackSubmit : flow === "quote" ? text.submit : flowText.bookSubmit, sending: text.sending, className: callbackPreset ? cn(c?.submit, c?.callbackSubmit) : c?.submit }), _jsx(Fragment, { children: props.trust }, "trust")] }), opening && lead !== "callback" && _jsx("p", { className: cn("text-sm text-ink-soft", c?.opening), children: opening }), text.privacy !== "" && _jsx("p", { className: cn("text-sm text-ink-soft", c?.privacy), children: text.privacy })] }));
+    // `qualify-first` shows the contact step as soon as a need's radio is
+    // checked (`:has`) — without a script, and inside the tap with one.
+    const contactShown = layout === "single" || (need !== undefined && !editing);
+    const contactClass = contactShown ? "flex" : "hidden group-has-[[data-need-option]:checked]/lead:flex";
+    const stepView = (step) => {
+        switch (step) {
+            case "intro": {
+                const chosen = intro?.options.find(o => o.value === introValue);
+                return {
+                    id: step,
+                    label: intro?.label ?? "",
+                    value: chosen?.label ?? null,
+                    node: intro && (_jsx(IntroField, { intro: intro, value: introValue, onPick: (v, radio) => moveOn(() => (setIntro(v), stepper.next()), radio, false), onSelect: stay(setIntro), 
+                        // On a screen of its own, a question is its heading: never only for assistive technology.
+                        classNames: props.classNames })),
+                };
+            }
+            case "need":
+                return {
+                    id: step,
+                    label: text.needLabel,
+                    value: needLabel ?? null,
+                    node: (_jsx(NeedField, { display: needDisplay === "select" ? "tiles" : needDisplay, name: wire.subject, needs: needs, need: need, editing: true, hydrated: hydrated, label: text.needLabel, changeLabel: text.needChange, requiredText: text.needRequired, enterPicks: true, onPick: pick, onSelect: stay(setNeed), onEdit: () => undefined, classNames: props.classNames })),
+                };
+            case "locality":
+                return {
+                    id: step,
+                    label: text.localityLabel,
+                    value: localityShown ?? null,
+                    node: (_jsxs(_Fragment, { children: [localityField, _jsx(Button, { type: "button", size: "touch", "data-lead-chrome": "", className: cn("w-full", c?.stepNext), onClick: continueLocality, children: flowText.stepNext })] })),
+                };
+            case "phone":
+                return {
+                    id: step,
+                    label: text.phoneLabel,
+                    value: null,
+                    node: callbackPreset ? (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", name: CHANNEL_FIELD, value: "callback" }), phone, _jsx(ConsentField, { sentence: text.callbackConsent, requiredText: text.consentRequired, error: at("consent"), className: c?.consent, classNames: c }), tail] })) : (_jsxs(_Fragment, { children: [priceShown, photos, props.localityStep === "with-phone" && localityField, phone, nameField, _jsx(Fragment, { children: props.extras }, "extras"), tail] })),
+                };
+            default: {
+                const inputs = screenOf(step).flatMap(id => asked.filter(i => i.id === id));
+                const answerOf = (input) => {
+                    const answer = estimate.answers[input.id];
+                    const option = input.options.find(o => o.id === answer);
+                    return answer === ESTIMATE_UNKNOWN ? flowText.estimateUnknown : option ? labelOf(option.labels, locale) : null;
+                };
+                const values = inputs.map(answerOf);
+                const first = inputs[0];
+                return {
+                    id: step,
+                    label: inputs.map(i => labelOf(i.labels, locale)).join(" · "),
+                    value: values.length > 0 && values.every(v => v !== null) ? values.join(" · ") : null,
+                    node: model && shownNeed !== undefined && first && (_jsxs(_Fragment, { children: [inputs.map(input => (_jsx(EstimateQuestionField, { model: model, need: shownNeed, input: input, question: props.questions?.[input.id], ...estimateProps }, input.id))), inputs.length > 1 && (_jsx(Button, { type: "button", size: "touch", "data-lead-chrome": "", className: cn("w-full", c?.stepNext), onClick: () => continueScreen(inputs.map(i => i.id)), children: props.questions?.[first.id]?.next ?? flowText.stepNext }))] })),
+                };
+            }
+        }
+    };
+    return (_jsxs("div", { ref: root, ...rootProps, children: [_jsx(Fragment, { children: props.head ?? (_jsxs("div", { className: cn("flex flex-col gap-1", c?.head), children: [_jsx("p", { className: cn("font-display text-2xl font-bold text-ink", c?.title), children: text.title }), _jsx("p", { className: cn("text-ink-soft", c?.lede), children: text.lede })] })) }, "head"), lead !== "form" && (lead !== "callback" || callbackElsewhere) && channel(lead, true), _jsxs(QuoteFormShell, { id: `${id}-form`, placeSlug: place.slug, locale: locale, renderedAt: renderedAt, honeypotLabel: text.honeypotLabel, formId: formId, card: id, onSubmit: onSubmit, onKeyDown: onKeyDown, data: steps ? { "data-lead-steps": "" } : undefined, className: cn("group/lead", c?.form), children: [_jsx(ExperimentFields, { experiment: experiment }), flow !== "quote" && repriced.shownCents !== undefined && _jsx("input", { type: "hidden", name: SHOWN_CENTS_FIELD, value: repriced.shownCents }), steps ? (_jsx(LeadSteps, { steps: stepIds.map(stepView), current: stepper.current, total: total, onBack: () => moveOn(stepper.back, null, false), onEdit: step => moveOn(() => stepper.edit(step), null, false), text: { stepProgress: flowText.stepProgress, stepProgressOpen: flowText.stepProgressOpen, stepBack: flowText.stepBack, change: text.needChange }, classNames: c })) : (_jsxs(_Fragment, { children: [_jsx(NeedField, { display: needDisplay, name: wire.subject, needs: needs, need: need, editing: editing, hydrated: hydrated, label: text.needLabel, changeLabel: text.needChange, requiredText: text.needRequired, enterPicks: enterPicks, onPick: pick, onSelect: select, onEdit: () => {
+                                    setEditing(true);
+                                    events.step("need");
+                                }, classNames: c }), _jsxs("div", { className: cn("flex-col gap-5", contactClass, c?.contact), children: [model && shownNeed !== undefined && wanted === "estimate" && _jsx(EstimateInputs, { model: model, need: shownNeed, questions: props.questions, ...estimateProps }), priceShown, photos, localityField, phone, nameField, _jsx(Fragment, { children: props.extras }, "extras"), tail] })] }))] }), (links.length > 0 || (rest.includes("callback") && callbackElsewhere)) &&
+                (props.channelsDisplay === "row" ? (_jsxs("div", { role: "group", "aria-label": text.otherChannels, className: cn("flex flex-row flex-wrap gap-2", c?.others), children: [links.map(ch => channel(ch, false)), rest.includes("callback") && callbackElsewhere && channel("callback", false)] })) : (_jsxs("div", { className: cn("flex flex-col gap-3", c?.others), children: [_jsx("p", { className: "text-sm font-medium text-ink", children: text.otherChannels }), links.length > 0 && _jsx("div", { className: "flex flex-wrap gap-2", children: links.map(ch => channel(ch, false)) }), rest.includes("callback") && callbackElsewhere && channel("callback", false)] })))] }));
 }

package/dist/react/LeadCaptureChannels.d.ts

@@ -1,6 +1,6 @@
 import { type CaptureChannel } from "../core/channels.js";
 import type { LeadCaptureFlowText, LeadCaptureText } from "../core/lead-capture-text.js";
-import type { FormEventHandler } from "react";
+import type { FormEventHandler, ReactNode } from "react";
 import { type FieldPart } from "./LeadCaptureFields.js";
 import type { SendFailure } from "./use-lead-submit.js";
 import { type PartClassNames } from "./parts.js";
@@ -8,7 +8,9 @@ import { type PartClassNames } from "./parts.js";
  * `channel` and `primary` dress every way out, the callback's summary
  * included; the `callback*` parts are the callback's own, after them.
  */
-export type ChannelPart = "channel" | "primary" | "callback" | "callbackSummary" | "callbackForm" | "callbackLede" | "callbackSubmit" | "consent" | "photos";
+export type ChannelPart = "channel" | "primary" | "callback" | "callbackSummary" | "callbackForm" | "callbackLede" | "callbackSubmit" | "consent" | "photos" | "channelIcon";
+/** A way out the brand may draw an icon for (`channelIcons`). */
+export type ChannelIconKey = "phone" | "whatsapp" | "sms" | "callback";
 export interface Experiment {
     name: string;
     variant: string;
@@ -33,6 +35,7 @@ export declare function ChannelLink(props: {
     text: LeadCaptureText;
     primary: boolean;
     experiment: Experiment | undefined;
+    icon?: ReactNode;
     classNames?: PartClassNames<ChannelPart> | undefined;
 }): import("react").JSX.Element | null;
 /**
@@ -73,6 +76,9 @@ export declare function CallbackForm(props: {
     failure: SendFailure | null;
     onRetry: () => void;
     onSoftError: () => void;
+    /** In the row of channels (`channelsDisplay="row"`): a button among the others, its form on a line of its own once open. */
+    row?: boolean | undefined;
+    icon?: ReactNode;
     classNames?: PartClassNames<ChannelPart | FieldPart> | undefined;
 }): import("react").JSX.Element;
 /**

package/dist/react/LeadCaptureChannels.js

@@ -8,6 +8,12 @@ import { ConsentField, FormMessage, PhoneField } from "./LeadCaptureFields.js";
 import { FailureMessage, SubmitButton } from "./LeadCaptureSubmit.js";
 import { partWithLeading } from "./parts.js";
 import { QuoteFormShell } from "./QuoteFormShell.js";
+/** The brand's icon before a channel's label, hidden from assistive technology: the label names it. */
+function ChannelIcon({ icon, className }) {
+    if (icon === undefined || icon === null)
+        return null;
+    return (_jsx("span", { "aria-hidden": "true", className: cn("flex shrink-0 items-center [&_svg]:size-5", className), children: icon }));
+}
 /**
  * A whole-pixel line under a brand's own type size: tailwind-merge drops a
  * size's line height for nothing, and a 15 px face at the page's 1.5 is a
@@ -32,7 +38,7 @@ export function ChannelLink(props) {
     const href = channelHref(channel, contact, message);
     if (!href)
         return null;
-    return (_jsx(Button, { href: href, variant: primary ? "primary" : "outline", size: "touch", className: partWithLeading(primary ? "w-full" : "flex-1", CHANNEL_LEADING, cn(c?.channel, primary && c?.primary) || undefined), "data-intent": channel === "sms" ? "sms" : undefined, "data-experiment": experiment?.name, "data-variant": experiment?.variant, children: text[LABEL[channel]] }));
+    return (_jsxs(Button, { href: href, variant: primary ? "primary" : "outline", size: "touch", className: partWithLeading(primary ? "w-full" : "flex-1", CHANNEL_LEADING, cn(c?.channel, primary && c?.primary) || undefined), "data-intent": channel === "sms" ? "sms" : undefined, "data-experiment": experiment?.name, "data-variant": experiment?.variant, children: [_jsx(ChannelIcon, { icon: props.icon, className: c?.channelIcon }), text[LABEL[channel]]] }));
 }
 /**
  * "Call me back": the form cut to a phone number and a consent, posted to the
@@ -45,7 +51,7 @@ export function ChannelLink(props) {
 export function CallbackForm(props) {
     const { id, primary, open, formId, placeSlug, locale, renderedAt, mobileName, subject, opening, text, experiment, error, classNames: c } = props;
     const at = (field) => (error?.field === field ? error.text : null);
-    return (_jsxs("details", { id: id, open: open, className: cn("w-full", c?.callback), children: [_jsx("summary", { "data-intent": "callback", className: partWithLeading(buttonVariants({ variant: primary ? "primary" : "outline", size: "touch", className: "flex w-full list-none [&::-webkit-details-marker]:hidden" }), CHANNEL_LEADING, cn(c?.channel, primary && c?.primary, c?.callbackSummary) || undefined), children: text.callback }), _jsxs(QuoteFormShell, { id: `${id}-form`, placeSlug: placeSlug, locale: locale, renderedAt: renderedAt, honeypotLabel: text.honeypotLabel, formId: formId, card: props.card, onSubmit: props.onSubmit, className: cn("mt-4 gap-4", c?.callbackForm), children: [_jsx("input", { type: "hidden", name: CHANNEL_FIELD, value: "callback" }), subject && _jsx("input", { type: "hidden", name: subject.name, value: subject.value }), _jsx(ExperimentFields, { experiment: experiment }), _jsx("p", { className: cn("text-ink-soft", c?.callbackLede), children: opening ?? text.callbackLede }), _jsx(PhoneField, { id: `${id}-phone`, name: mobileName, text: text, error: at("phone"), onSoftError: props.onSoftError, classNames: c }), _jsx(ConsentField, { sentence: text.callbackConsent, requiredText: text.consentRequired, error: at("consent"), className: c?.consent, classNames: c }), _jsx(FormMessage, { id: `${id}-error`, error: error && error.field !== "phone" && error.field !== "consent" ? error.text : null, className: c?.error }), _jsx(FailureMessage, { failure: props.failure, text: text, onRetry: props.onRetry, className: c?.error }), _jsx(SubmitButton, { busy: props.busy, label: text.callbackSubmit, sending: text.sending, className: c?.callbackSubmit })] })] }));
+    return (_jsxs("details", { id: id, open: open, className: cn(props.row ? "min-w-0 flex-1 open:basis-full" : "w-full", c?.callback), children: [_jsxs("summary", { "data-intent": "callback", className: partWithLeading(buttonVariants({ variant: primary ? "primary" : "outline", size: "touch", className: "flex w-full list-none [&::-webkit-details-marker]:hidden" }), CHANNEL_LEADING, cn(c?.channel, primary && c?.primary, c?.callbackSummary) || undefined), children: [_jsx(ChannelIcon, { icon: props.icon, className: c?.channelIcon }), text.callback] }), _jsxs(QuoteFormShell, { id: `${id}-form`, placeSlug: placeSlug, locale: locale, renderedAt: renderedAt, honeypotLabel: text.honeypotLabel, formId: formId, card: props.card, onSubmit: props.onSubmit, className: cn("mt-4 gap-4", c?.callbackForm), children: [_jsx("input", { type: "hidden", name: CHANNEL_FIELD, value: "callback" }), subject && _jsx("input", { type: "hidden", name: subject.name, value: subject.value }), _jsx(ExperimentFields, { experiment: experiment }), _jsx("p", { className: cn("text-ink-soft", c?.callbackLede), children: opening ?? text.callbackLede }), _jsx(PhoneField, { id: `${id}-phone`, name: mobileName, text: text, error: at("phone"), onSoftError: props.onSoftError, classNames: c }), _jsx(ConsentField, { sentence: text.callbackConsent, requiredText: text.consentRequired, error: at("consent"), className: c?.consent, classNames: c }), _jsx(FormMessage, { id: `${id}-error`, error: error && error.field !== "phone" && error.field !== "consent" ? error.text : null, className: c?.error }), _jsx(FailureMessage, { failure: props.failure, text: text, onRetry: props.onRetry, className: c?.error }), _jsx(SubmitButton, { busy: props.busy, label: text.callbackSubmit, sending: text.sending, className: c?.callbackSubmit })] })] }));
 }
 /**
  * A `quote` need priced from photos (a deep clean, after-works): the photos