@sonordev/site-kit 6.4.0 → 7.0.0

package/dist/FormSpotlight-VKD774PZ.mjs

@@ -1,756 +0,0 @@
-'use client';
-import { StageStyles, SummaryTick } from './chunk-WSPGXSBU.mjs';
-import { stageFirstName, useFieldControls, stageViews, stageEstimate, AUTO_ADVANCE_TYPES } from './chunk-KOPFFKG2.mjs';
-import { FormField } from './chunk-WRRVYPMY.mjs';
-import { isEmptyValue, isDisplayOnly } from './chunk-QRHVMTHF.mjs';
-import './chunk-BEXTDHO4.mjs';
-import { useMemo, useCallback, useState, useRef, useEffect } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var MULTI_CONTROL_TYPES = ["radio", "checkbox", "rating", "slider"];
-function optionLabel(field, value) {
-  const raw = Array.isArray(field.options) ? field.options : [];
-  const hit = raw.find(
-    (o) => (typeof o === "string" ? o : o?.value) === value
-  );
-  if (!hit) return String(value);
-  return typeof hit === "string" ? hit : hit.label || String(value);
-}
-function formatDateish(value) {
-  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
-  if (!m) return null;
-  const MONTHS = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December"
-  ];
-  const month = MONTHS[Number(m[2]) - 1];
-  if (!month) return null;
-  return `${month} ${Number(m[3])}`;
-}
-function renderCompletionTemplate(template, field, values) {
-  const stringify = (v) => Array.isArray(v) ? v.map(String).join(", ") : v === void 0 || v === null ? "" : String(v);
-  return template.replace(/\{(\w+)\}/g, (_match, token) => {
-    if (token === "value") return stringify(values[field.slug]);
-    if (token === "label") return field.label;
-    if (token === "first_name") {
-      const key = Object.keys(values).find((k) => /^first[_-]?name$/i.test(k));
-      return (key ? stageFirstName(values[key]) : null) || "";
-    }
-    return stringify(values[token]);
-  }).replace(/\s{2,}/g, " ").trim();
-}
-function groupSentence(fields, values) {
-  const val = (f) => values[f.slug];
-  const answered = fields.filter((f) => !isEmptyValue(val(f)));
-  if (answered.length === 0) return null;
-  for (const f of answered) {
-    const template = f.completion_message?.trim();
-    if (template) {
-      const rendered = renderCompletionTemplate(template, f, values);
-      if (rendered) return rendered;
-    }
-  }
-  const firstNameField = fields.find((f) => /first[_-]?name|^fname$/i.test(f.slug));
-  const anyNameField = fields.find(
-    (f) => /(^|_|-)name($|_|-)/i.test(f.slug) || /name/i.test(f.slug)
-  );
-  if (firstNameField || anyNameField) {
-    const source = firstNameField ?? anyNameField;
-    const name = stageFirstName(val(source));
-    if (name) return `Nice to meet you, ${name}.`;
-  }
-  const email = fields.find(
-    (f) => f.field_type === "email" && !isEmptyValue(val(f))
-  );
-  const phone = fields.find(
-    (f) => (f.field_type === "phone" || f.field_type === "tel") && !isEmptyValue(val(f))
-  );
-  if (email && phone) return `We'll follow up at ${val(email)} or ${val(phone)}.`;
-  if (email) return `We'll follow up at ${val(email)}.`;
-  if (phone) return `We'll follow up at ${val(phone)}.`;
-  if (answered.length === 1) {
-    const f = answered[0];
-    const v = val(f);
-    switch (f.field_type) {
-      case "date":
-      case "datetime": {
-        const pretty = formatDateish(String(v));
-        if (pretty) return `Locked in for ${pretty}.`;
-        break;
-      }
-      case "select":
-      case "radio":
-        return `${optionLabel(f, v)} it is.`;
-      case "rating":
-        return `${v} stars. Appreciated.`;
-      case "textarea":
-        return `Got it. Thanks for the detail.`;
-      case "checkbox":
-        if (Array.isArray(v))
-          return `${v.map((x) => optionLabel(f, x)).join(", ")}. Noted.`;
-        if (v === true) return `${f.label}. Noted.`;
-        break;
-    }
-  }
-  return answered.map((f) => {
-    const v = val(f);
-    return `${f.label}: ${Array.isArray(v) ? v.join(", ") : String(v)}`;
-  }).join(" \xB7 ");
-}
-var STYLE_ID = "sk-spot-css";
-var CSS = `
-@keyframes sk-spot-shake-a { 0%, 100% { transform: translateX(0) } 18% { transform: translateX(-9px) } 40% { transform: translateX(7px) } 62% { transform: translateX(-5px) } 82% { transform: translateX(3px) } }
-@keyframes sk-spot-shake-b { 0%, 100% { transform: translateX(0) } 18% { transform: translateX(-9px) } 40% { transform: translateX(7px) } 62% { transform: translateX(-5px) } 82% { transform: translateX(3px) } }
-@keyframes sk-spot-glow-breathe {
-  0%, 100% { box-shadow: 0 0 14px 0 color-mix(in srgb, var(--sk-primary, #2563eb) 45%, transparent) }
-  50% { box-shadow: 0 0 24px 2px color-mix(in srgb, var(--sk-primary, #2563eb) 60%, transparent) }
-}
-
-.sk-spot { position: relative; }
-
-/* ---- The glow: one ring that VISITS fields. Its position never animates \u2014
-   on every move a GHOST plays the exit at the old field WHILE the real ring
-   plays its entrance at the new one. One seamless overlapping gesture, zero
-   timers (immune to background throttling). ---- */
-/* Leaves WITH the field: the field it is leaving relaxes from its focused
-   scale back to rest, so the ring shrinks by the same amount on the same
-   curve instead of expanding away from it. */
-@keyframes sk-glow-out {
-  0% { opacity: 1; transform: scale(1);
-       box-shadow: 0 0 14px 0 color-mix(in srgb, var(--sk-primary, #2563eb) 45%, transparent) }
-  100% { opacity: 0; transform: scale(.98);
-       box-shadow: 0 0 6px 0 color-mix(in srgb, var(--sk-primary, #2563eb) 0%, transparent) }
-}
-/* Settles in rather than popping: a hair under resting size, no overshoot
-   past it, and the halo rises straight to rest instead of flaring first. */
-@keyframes sk-glow-in {
-  0% { opacity: 0; transform: scale(.985);
-       box-shadow: 0 0 6px 0 color-mix(in srgb, var(--sk-primary, #2563eb) 20%, transparent) }
-  100% { opacity: 1; transform: scale(1);
-       box-shadow: 0 0 14px 0 color-mix(in srgb, var(--sk-primary, #2563eb) 45%, transparent) }
-}
-.sk-spot__glow, .sk-spot__glow-ghost {
-  position: absolute; pointer-events: none; z-index: 2;
-  border: 2px solid color-mix(in srgb, var(--sk-primary, #2563eb) 72%, currentColor);
-  border-radius: calc(var(--sk-input-radius, 6px) + 4px);
-}
-.sk-spot__glow { opacity: 0; transition: none; }
-.sk-spot__glow[data-sk-on="true"] {
-  /* ease-out, not a spring \u2014 the ring arrives and settles, never bounces. */
-  animation:
-    sk-glow-in .38s cubic-bezier(.22,.8,.3,1) both,
-    sk-spot-glow-breathe 2.2s ease-in-out .42s infinite;
-}
-/* Same duration and curve as the field's own transform transition below, so
-   ring and field relax together rather than on separate clocks. */
-.sk-spot__glow-ghost { animation: sk-glow-out .3s cubic-bezier(.22,1,.36,1) both; }
-
-/* ---- Rows ---- */
-.sk-spot__groups { display: flex; flex-direction: column; }
-/* A collapsed row keeps the height it had as fields (set inline), and the
-   sentence rides in the middle of that reserved space. */
-[data-sk-part="spot-group"] { display: flex; flex-direction: column; justify-content: center; }
-/* Vertical clip only: the collapse animation needs the y-axis contained,
-   but scaled labels and the glow must never lose their left edge. */
-.sk-spot .sk-stage__collapse > div { overflow: visible clip; }
-.sk-spot__rowfields { display: flex; flex-wrap: wrap; gap: 16px; padding: 4px 2px 6px; }
-.sk-spot__rowfields > * { flex: 1 1 100%; }
-@media (min-width: 560px) {
-  .sk-spot__rowfields > .sk-spot__q--sub { flex: 1 1 0; min-width: 180px; }
-}
-
-/* ---- Fields: hover expands a touch; the active one holds it ---- */
-.sk-spot__q {
-  position: relative;
-  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease;
-}
-.sk-spot__q:hover { transform: scale(1.015); }
-.sk-spot__q[data-sk-spot="active"] { transform: scale(1.02); z-index: 1; }
-.sk-spot--live .sk-spot__q[data-sk-spot="idle"]:not(:hover) { opacity: .72; }
-.sk-spot__q .sk-form__label { transition: opacity .3s ease; }
-.sk-spot--live .sk-spot__q[data-sk-spot="filled"] .sk-form__label { opacity: .75; }
-
-/* ---- Sentence rows: what the form says back ---- */
-/* Both layers cross-fade as the rows morph, so neither pops in or out. */
-.sk-spot__rowfields { opacity: 1; transition: opacity .3s ease .08s; }
-[data-sk-group-state="sentence"] .sk-spot__rowfields { opacity: 0; transition-delay: 0s; }
-.sk-spot__sentence {
-  display: flex; align-items: center; gap: 10px;
-  padding: 12px 2px;
-  opacity: 1; transition: opacity .3s ease .08s;
-}
-[data-sk-group-state="open"] .sk-spot__sentence { opacity: 0; transition-delay: 0s; }
-.sk-spot__sentence-text { font-weight: 600; overflow-wrap: anywhere; }
-.sk-spot__sentence-edit {
-  margin-left: auto; flex-shrink: 0;
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 26px; height: 26px; border-radius: 50%;
-  background: none; cursor: pointer; color: inherit;
-  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
-  opacity: .6;
-  transition: opacity .15s ease, background-color .15s ease;
-}
-.sk-spot__sentence-edit:hover,
-.sk-spot__sentence-edit:focus-visible {
-  opacity: 1;
-  background: color-mix(in srgb, currentColor 10%, transparent);
-}
-
-/* ---- Finale: the submit gets room and presence. :where() keeps the
-   specificity at zero so site button theming always wins. ---- */
-.sk-spot :where(.sk-form__actions) { margin-top: 28px; display: flex; justify-content: flex-end; }
-.sk-spot :where([data-sk-part="spot-submit"]) {
-  padding: 13px 30px; font-size: 1.05em; min-width: 200px; cursor: pointer;
-}
-@media (max-width: 560px) {
-  .sk-spot :where([data-sk-part="spot-submit"]) { width: 100%; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .sk-spot__glow { animation: none !important; }
-  .sk-spot__glow[data-sk-on="true"] { opacity: 1;
-    box-shadow: 0 0 14px 0 color-mix(in srgb, var(--sk-primary, #2563eb) 50%, transparent); }
-  .sk-spot__glow-ghost { animation: none !important; opacity: 0; }
-  .sk-spot__q { transition: none; animation: none !important; }
-  .sk-spot__q:hover { transform: none; }
-  .sk-spot__q[data-sk-spot="active"] { transform: none; }
-  .sk-spot__rowfields, .sk-spot__sentence { transition: none; }
-}
-`;
-function SpotStyles() {
-  return /* @__PURE__ */ jsx("style", { id: STYLE_ID, dangerouslySetInnerHTML: { __html: CSS } });
-}
-function PencilIcon() {
-  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }) });
-}
-function FormSpotlight({
-  config,
-  values,
-  errors,
-  touched,
-  isSubmitting,
-  submitError,
-  momentum,
-  className,
-  setFieldValue,
-  validateField,
-  isFieldVisible,
-  fieldIsComplete,
-  applyFieldError,
-  submit,
-  trackStepChange,
-  trackFieldFocus,
-  trackFieldBlur,
-  honeypot
-}) {
-  const fieldControls = useFieldControls(config.fields);
-  const views = useMemo(() => {
-    return stageViews(config).map((v) => ({ ...v, fields: v.fields.filter(isFieldVisible) })).filter((v) => v.fields.length > 0);
-  }, [config, isFieldVisible]);
-  const questions = useMemo(() => views.flatMap((v) => v.fields), [views]);
-  const questionCount = questions.length;
-  const groupOf = useCallback(
-    (slug) => views.findIndex((v) => v.fields.some((f) => f.slug === slug)),
-    [views]
-  );
-  const firstIncomplete = questions.findIndex((q) => !fieldIsComplete(q));
-  const [activeSlug, setActiveSlug] = useState(
-    () => questions[Math.max(0, firstIncomplete)]?.slug ?? null
-  );
-  const [live, setLive] = useState(false);
-  const [shakes, setShakes] = useState({});
-  const [collapsed, setCollapsed] = useState({});
-  const [glow, setGlow] = useState({ top: 0, left: 0, width: 0, height: 0, visible: false });
-  const formRef = useRef(null);
-  const autoTimer = useRef(null);
-  const activeIndex = questions.findIndex((q) => q.slug === activeSlug);
-  const activeGroup = activeSlug ? groupOf(activeSlug) : -1;
-  const groupComplete = useCallback(
-    (view) => view.fields.every(
-      (f) => fieldIsComplete(f) || !f.is_required && isEmptyValue(values[f.slug])
-    ) && view.fields.some((f) => !isEmptyValue(values[f.slug])),
-    [fieldIsComplete, values]
-  );
-  const completeCount = questions.reduce((n, q) => n + (fieldIsComplete(q) ? 1 : 0), 0);
-  const ready = momentum.total > 0 ? momentum.done >= momentum.total : true;
-  const clearAutoTimer = useCallback(() => {
-    if (autoTimer.current !== null) {
-      window.clearTimeout(autoTimer.current);
-      autoTimer.current = null;
-    }
-  }, []);
-  useEffect(() => clearAutoTimer, [clearAutoTimer]);
-  const measureRect = useCallback(
-    (slug) => {
-      const form = formRef.current;
-      if (!form) return null;
-      const wrapper = form.querySelector(`[data-sk-slug="${slug}"]`);
-      if (!wrapper) return null;
-      const field = questions.find((q) => q.slug === slug);
-      const target = MULTI_CONTROL_TYPES.includes(field?.field_type || "") ? wrapper : wrapper.querySelector(
-        "input:not([data-sk-honeypot]), textarea, select, button"
-      ) || wrapper;
-      const formRect = form.getBoundingClientRect();
-      const rect = target.getBoundingClientRect();
-      const PAD = 4;
-      return {
-        top: rect.top - formRect.top - PAD,
-        left: rect.left - formRect.left - PAD,
-        width: rect.width + PAD * 2,
-        height: rect.height + PAD * 2
-      };
-    },
-    [questions]
-  );
-  const measureRectRef = useRef(measureRect);
-  measureRectRef.current = measureRect;
-  const [glowOn, setGlowOn] = useState(false);
-  const [ghost, setGhost] = useState(null);
-  const ghostSeq = useRef(0);
-  const glowStateRef = useRef({ on: false, rect: null });
-  useEffect(() => {
-    if (!live) return;
-    const prev = glowStateRef.current;
-    const leave = () => {
-      if (prev.on && prev.rect) {
-        ghostSeq.current += 1;
-        setGhost({ ...prev.rect, key: ghostSeq.current });
-      }
-    };
-    if (!activeSlug) {
-      leave();
-      setGlowOn(false);
-      glowStateRef.current = { on: false, rect: null };
-      return;
-    }
-    const rect = measureRectRef.current(activeSlug);
-    if (!rect) {
-      leave();
-      setGlowOn(false);
-      glowStateRef.current = { on: false, rect: null };
-      return;
-    }
-    leave();
-    setGlow({ ...rect, visible: true });
-    setGlowOn(true);
-    glowStateRef.current = { on: true, rect };
-  }, [activeSlug, live]);
-  useEffect(() => {
-    if (!live || typeof ResizeObserver === "undefined") return;
-    const form = formRef.current;
-    if (!form) return;
-    const follow = () => {
-      if (!glowStateRef.current.on) return;
-      const slug = activeSlugRef.current;
-      if (!slug) return;
-      const rect = measureRectRef.current(slug);
-      if (rect) {
-        setGlow({ ...rect, visible: true });
-        glowStateRef.current = { on: true, rect };
-      }
-    };
-    const ro = new ResizeObserver(follow);
-    ro.observe(form);
-    window.addEventListener("resize", follow);
-    return () => {
-      ro.disconnect();
-      window.removeEventListener("resize", follow);
-    };
-  }, [live]);
-  const groupEls = useRef({});
-  const [reserved, setReserved] = useState({});
-  useEffect(() => {
-    if (!live) return;
-    const heights = {};
-    setCollapsed((prev) => {
-      let changed = false;
-      const next = { ...prev };
-      views.forEach((view, i) => {
-        if (i === activeGroup || prev[i]) return;
-        if (groupComplete(view) && groupSentence(view.fields, values)) {
-          const height = groupEls.current[i]?.getBoundingClientRect().height;
-          if (height) heights[i] = height;
-          next[i] = true;
-          changed = true;
-        }
-      });
-      return changed ? next : prev;
-    });
-    if (Object.keys(heights).length) {
-      setReserved((prev) => ({ ...heights, ...prev }));
-    }
-  }, [activeGroup, live, views, groupComplete, values]);
-  const inputFor = useCallback((slug) => {
-    return formRef.current?.querySelector(
-      `[data-sk-slug="${slug}"] input:not([data-sk-honeypot]), [data-sk-slug="${slug}"] textarea, [data-sk-slug="${slug}"] select, [data-sk-slug="${slug}"] button`
-    ) ?? null;
-  }, []);
-  const reopenGroup = useCallback(
-    (index) => {
-      setLive(true);
-      setCollapsed((prev) => ({ ...prev, [index]: false }));
-      const slug = views[index]?.fields[0]?.slug;
-      if (slug) {
-        window.setTimeout(() => inputFor(slug)?.focus(), 120);
-        const qIndex = questions.findIndex((q) => q.slug === slug);
-        if (qIndex >= 0) trackStepChange(qIndex + 1);
-      }
-    },
-    [views, questions, inputFor, trackStepChange]
-  );
-  const travelOnward = useCallback(
-    (from) => {
-      for (let i = from + 1; i < questions.length; i++) {
-        if (!fieldIsComplete(questions[i])) {
-          inputFor(questions[i].slug)?.focus();
-          return;
-        }
-      }
-      for (let i = 0; i < from; i++) {
-        if (!fieldIsComplete(questions[i])) {
-          inputFor(questions[i].slug)?.focus();
-          return;
-        }
-      }
-      setActiveSlug(null);
-      formRef.current?.querySelector('[data-sk-part="spot-submit"]')?.focus();
-    },
-    [questions, fieldIsComplete, inputFor]
-  );
-  const shake = useCallback((slug) => {
-    setShakes((prev) => ({ ...prev, [slug]: (prev[slug] || 0) + 1 }));
-  }, []);
-  const advanceFrom = useCallback(
-    (index) => {
-      const q = questions[index];
-      if (!q) return;
-      const error = validateField(q);
-      if (error) {
-        applyFieldError(q.slug, error);
-        shake(q.slug);
-        return;
-      }
-      travelOnward(index);
-    },
-    [questions, validateField, applyFieldError, shake, travelOnward]
-  );
-  const advanceFromRef = useRef(advanceFrom);
-  advanceFromRef.current = advanceFrom;
-  const activeIndexRef = useRef(activeIndex);
-  activeIndexRef.current = activeIndex;
-  const activeSlugRef = useRef(activeSlug);
-  activeSlugRef.current = activeSlug;
-  const questionsRef = useRef(questions);
-  questionsRef.current = questions;
-  const trackStepChangeRef = useRef(trackStepChange);
-  trackStepChangeRef.current = trackStepChange;
-  useEffect(() => {
-    const form = formRef.current;
-    if (!form) return;
-    const onFocusIn = (e) => {
-      const wrapper = e.target?.closest?.("[data-sk-slug]");
-      const slug = wrapper?.getAttribute("data-sk-slug") ?? null;
-      setLive(true);
-      if (slug && slug !== activeSlugRef.current) {
-        setActiveSlug(slug);
-        const index = questionsRef.current.findIndex((q) => q.slug === slug);
-        if (index >= 0) trackStepChangeRef.current(index + 1);
-      } else if (!slug) {
-        setActiveSlug(null);
-      }
-    };
-    form.addEventListener("focusin", onFocusIn);
-    return () => form.removeEventListener("focusin", onFocusIn);
-  }, []);
-  const handleFieldChange = useCallback(
-    (field, soloAutoAdvance) => (value) => {
-      setLive(true);
-      setFieldValue(field.slug, value);
-      if (soloAutoAdvance && !isEmptyValue(value)) {
-        clearAutoTimer();
-        autoTimer.current = window.setTimeout(() => {
-          autoTimer.current = null;
-          if (activeIndexRef.current >= 0) advanceFromRef.current(activeIndexRef.current);
-        }, 380);
-      }
-    },
-    [setFieldValue, clearAutoTimer]
-  );
-  const travelInputs = useCallback(() => {
-    const form = formRef.current;
-    if (!form) return [];
-    return questions.map((q) => inputFor(q.slug)).filter((el) => !!el);
-  }, [questions, inputFor]);
-  const handleKeyDown = useCallback(
-    (e) => {
-      const target = e.target;
-      const tag = target.tagName;
-      const isField = tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
-      if (!isField || activeIndex < 0) return;
-      if (e.key === "Enter") {
-        if (tag === "TEXTAREA" && e.shiftKey) return;
-        e.preventDefault();
-        advanceFrom(activeIndex);
-        return;
-      }
-      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-        if (tag !== "INPUT") return;
-        const type = target.type;
-        if (type === "number" || type === "range" || type === "radio" || type === "checkbox")
-          return;
-        e.preventDefault();
-        const inputs = travelInputs();
-        const domIndex = inputs.indexOf(inputFor(questions[activeIndex].slug));
-        if (e.key === "ArrowDown") {
-          const next = inputs[domIndex + 1];
-          if (next) next.focus();
-          else
-            formRef.current?.querySelector('[data-sk-part="spot-submit"]')?.focus();
-        } else {
-          const prev = inputs[domIndex - 1];
-          if (prev) prev.focus();
-        }
-      }
-    },
-    [activeIndex, questions, advanceFrom, travelInputs, inputFor]
-  );
-  const handleSubmit = useCallback(
-    (e) => {
-      e.preventDefault();
-      if (isSubmitting) return;
-      clearAutoTimer();
-      void submit();
-    },
-    [isSubmitting, submit, clearAutoTimer]
-  );
-  useEffect(() => {
-    const offender = questions.find((q) => errors[q.slug]);
-    if (!offender) return;
-    const g = groupOf(offender.slug);
-    if (g >= 0 && collapsed[g]) {
-      setCollapsed((prev) => ({ ...prev, [g]: false }));
-      window.setTimeout(() => inputFor(offender.slug)?.focus(), 120);
-      shake(offender.slug);
-      return;
-    }
-    if (offender.slug !== activeSlug) {
-      inputFor(offender.slug)?.focus();
-      shake(offender.slug);
-    }
-  }, [errors]);
-  const firstFieldIdToView = useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    views.forEach((v, i) => map.set(v.fields[0].id, i));
-    return map;
-  }, [views]);
-  const renderedViews = /* @__PURE__ */ new Set();
-  return /* @__PURE__ */ jsxs(
-    "form",
-    {
-      ref: formRef,
-      className: `sk-form sk-spot ${live ? "sk-spot--live " : ""}${className || ""}`,
-      "data-sk-part": "spotlight",
-      "data-sk-state": isSubmitting ? "submitting" : "idle",
-      "data-sk-ready": ready && momentum.total > 0 ? "true" : void 0,
-      onSubmit: handleSubmit,
-      onKeyDown: handleKeyDown,
-      children: [
-        /* @__PURE__ */ jsx(StageStyles, {}),
-        /* @__PURE__ */ jsx(SpotStyles, {}),
-        ghost && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "sk-spot__glow-ghost",
-            "data-sk-part": "spot-glow-ghost",
-            style: { top: ghost.top, left: ghost.left, width: ghost.width, height: ghost.height },
-            onAnimationEnd: () => setGhost((g) => g && g.key === ghost.key ? null : g),
-            "aria-hidden": "true"
-          },
-          `ghost-${ghost.key}`
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "sk-spot__glow",
-            "data-sk-part": "spot-glow",
-            "data-sk-on": glowOn ? "true" : void 0,
-            style: { top: glow.top, left: glow.left, width: glow.width, height: glow.height },
-            "aria-hidden": "true"
-          },
-          `glow-${activeSlug || "none"}`
-        ),
-        /* @__PURE__ */ jsxs("header", { className: "sk-stage__head", "data-sk-part": "stage-head", children: [
-          /* @__PURE__ */ jsx("span", { className: "sk-stage__head-name", children: config.name }),
-          /* @__PURE__ */ jsx("span", { className: "sk-stage__head-meta", "data-sk-part": "stage-estimate", children: `Takes ${stageEstimate(questionCount)}` })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "sk-stage__hud", "data-sk-part": "stage-hud", children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "sk-stage__meter",
-              "data-sk-part": "stage-meter",
-              role: "progressbar",
-              "aria-label": "Form progress",
-              "aria-valuemin": 0,
-              "aria-valuemax": questionCount,
-              "aria-valuenow": completeCount,
-              "aria-valuetext": `${completeCount} of ${questionCount} answered`,
-              children: questions.map((q, i) => /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "sk-stage__seg",
-                  "data-sk-lit": fieldIsComplete(q) ? "true" : void 0,
-                  "data-sk-live": i === activeIndex ? "true" : void 0,
-                  "aria-hidden": "true"
-                },
-                q.id
-              ))
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "sk-stage__counter",
-              "data-sk-part": "stage-counter",
-              "data-sk-ready": ready && momentum.total > 0 ? "true" : void 0,
-              "aria-live": "polite",
-              children: ready ? "Ready" : `${completeCount} / ${questionCount}`
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "sk-spot__groups", "data-sk-part": "spot-groups", children: (config.fields || []).map((field) => {
-          if (!isFieldVisible(field)) return null;
-          if (isDisplayOnly(field)) {
-            return /* @__PURE__ */ jsx(
-              FormField,
-              {
-                controls: fieldControls,
-                field,
-                value: values[field.slug],
-                onChange: (value) => setFieldValue(field.slug, value)
-              },
-              field.id
-            );
-          }
-          const viewIndex = firstFieldIdToView.get(field.id);
-          if (viewIndex === void 0 || renderedViews.has(viewIndex)) return null;
-          renderedViews.add(viewIndex);
-          const view = views[viewIndex];
-          const isCollapsed = collapsed[viewIndex] === true;
-          const sentence = groupSentence(view.fields, values);
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref: (el) => {
-                groupEls.current[viewIndex] = el;
-              },
-              "data-sk-part": "spot-group",
-              "data-sk-group-state": isCollapsed ? "sentence" : "open",
-              style: reserved[viewIndex] ? { minHeight: reserved[viewIndex] } : void 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "sk-stage__collapse",
-                    style: { gridTemplateRows: isCollapsed ? "0fr" : "1fr" },
-                    children: /* @__PURE__ */ jsx("div", { inert: isCollapsed ? true : void 0, children: /* @__PURE__ */ jsx("div", { className: "sk-spot__rowfields", "data-sk-part": "spot-rowfields", children: view.fields.map((f) => {
-                      const isActive = f.slug === activeSlug;
-                      const filled = fieldIsComplete(f);
-                      const shakeN = shakes[f.slug] || 0;
-                      return /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          "data-sk-slug": f.slug,
-                          "data-sk-part": "spot-question",
-                          "data-sk-spot": isActive ? "active" : filled ? "filled" : "idle",
-                          className: "sk-spot__q" + (view.fields.length > 1 ? " sk-spot__q--sub" : "") + ` sk-form__field-wrapper sk-form__field-wrapper--${f.width || "full"}`,
-                          style: shakeN > 0 ? {
-                            animation: `${shakeN % 2 ? "sk-spot-shake-a" : "sk-spot-shake-b"} .38s ease`
-                          } : void 0,
-                          children: /* @__PURE__ */ jsx(
-                            FormField,
-                            {
-                              controls: fieldControls,
-                              field: f,
-                              value: values[f.slug],
-                              error: errors[f.slug],
-                              showValid: !!touched[f.slug] && !errors[f.slug] && fieldIsComplete(f),
-                              onChange: handleFieldChange(
-                                f,
-                                view.fields.length === 1 && AUTO_ADVANCE_TYPES.includes(f.field_type)
-                              ),
-                              onFocus: () => trackFieldFocus(f.slug),
-                              onBlur: () => trackFieldBlur(f.slug)
-                            }
-                          )
-                        },
-                        f.id
-                      );
-                    }) }) })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "sk-stage__collapse",
-                    style: { gridTemplateRows: isCollapsed ? "1fr" : "0fr" },
-                    children: /* @__PURE__ */ jsx("div", { inert: isCollapsed ? void 0 : true, children: sentence && /* @__PURE__ */ jsxs("div", { className: "sk-spot__sentence", "data-sk-part": "spot-sentence", children: [
-                      /* @__PURE__ */ jsx(SummaryTick, {}),
-                      /* @__PURE__ */ jsx("span", { className: "sk-spot__sentence-text", children: sentence }),
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          type: "button",
-                          className: "sk-spot__sentence-edit",
-                          "data-sk-part": "spot-sentence-edit",
-                          "aria-label": `Edit ${view.fields.map((f) => f.label).join(", ")}`,
-                          onClick: () => reopenGroup(viewIndex),
-                          children: /* @__PURE__ */ jsx(PencilIcon, {})
-                        }
-                      )
-                    ] }) })
-                  }
-                )
-              ]
-            },
-            view.fields[0].id
-          );
-        }) }),
-        /* @__PURE__ */ jsx("div", { className: "sk-form__actions", style: { justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "submit",
-            className: "sk-form__btn sk-form__btn--submit",
-            "data-sk-part": "spot-submit",
-            disabled: isSubmitting,
-            children: isSubmitting ? "Submitting..." : config.submit_button_text
-          }
-        ) }),
-        submitError && /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: "sk-form__submit-error",
-            role: "alert",
-            style: { color: "var(--sk-error, #dc2626)", fontSize: 14, marginTop: 12 },
-            children: submitError
-          }
-        ),
-        honeypot
-      ]
-    }
-  );
-}
-
-export { FormSpotlight, SpotStyles, groupSentence, renderCompletionTemplate };
-//# sourceMappingURL=FormSpotlight-VKD774PZ.mjs.map
-//# sourceMappingURL=FormSpotlight-VKD774PZ.mjs.map