@sonordev/site-kit 6.4.0 → 7.0.0

package/dist/chunk-WRRVYPMY.mjs

@@ -1,535 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-// src/forms/delight.tsx
-var STYLE_ID = "sk-delight-css";
-var CSS = `
-/* Every frame must carry the centering translateY: the animation fills both
-   directions, so a keyframe transform of scale() alone REPLACES the rule's
-   translateY(-50%) and drops the tick half its height below center. */
-@keyframes sk-tick-in {
-  0% { transform: translateY(-50%) scale(.3); opacity: 0 }
-  70% { transform: translateY(-50%) scale(1.15) }
-  100% { transform: translateY(-50%) scale(1); opacity: 1 }
-}
-@keyframes sk-tick-draw { to { stroke-dashoffset: 0 } }
-@keyframes sk-tick-ring { 0% { transform: scale(.5); opacity: .7 } 100% { transform: scale(2.2); opacity: 0 } }
-@keyframes sk-lock-in { 0% { opacity: .85; transform: scale(.985) } 100% { opacity: 0; transform: scale(1.012) } }
-@keyframes sk-momentum-sheen { 0% { transform: translateX(-120%) } 100% { transform: translateX(360%) } }
-@keyframes sk-momentum-flash { 0% { opacity: .55 } 100% { opacity: 0 } }
-@keyframes sk-spark-pulse {
-  0%, 100% { box-shadow: 0 0 4px 1px color-mix(in srgb, var(--sk-primary, #2563eb) 60%, currentColor) }
-  50% { box-shadow: 0 0 11px 2px color-mix(in srgb, var(--sk-primary, #2563eb) 60%, currentColor) }
-}
-@keyframes sk-fill-charge {
-  0%, 100% { box-shadow: 0 0 5px 0 color-mix(in srgb, var(--sk-primary, #2563eb) 55%, currentColor) }
-  50% { box-shadow: 0 0 13px 2px color-mix(in srgb, var(--sk-primary, #2563eb) 55%, currentColor) }
-}
-@keyframes sk-label-pop { 0% { transform: scale(.8) } 60% { transform: scale(1.15) } 100% { transform: scale(1) } }
-@keyframes sk-btn-wake { 0% { transform: scale(1) } 40% { transform: scale(1.04) } 100% { transform: scale(1) } }
-@keyframes sk-btn-breathe {
-  0%, 100% { filter: drop-shadow(0 0 0 transparent) }
-  50% { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--sk-primary, #2563eb) 60%, currentColor)) }
-}
-@keyframes sk-submit-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .6 } }
-
-/* ---- Field: aura, lift, lock-in, tick ---- */
-/* Flex, not the default inline formatting context: an <input> is inline-block,
-   so the wrapper would be a few px taller than the input (baseline descender
-   gap) and the absolutely-centered tick would sit visibly low. */
-[data-sk-part="field-input-wrap"] { display: flex; align-items: center; transition: transform .18s ease; }
-[data-sk-part="field-input-wrap"]:focus-within { transform: translateY(-2px); }
-/* Focus aura \u2014 the active field is the lit one. Glow-only pseudo (its own
-   box is transparent), so it never occludes the input. */
-[data-sk-part="field-input-wrap"]::before {
-  content: ''; position: absolute; inset: -3px;
-  border-radius: calc(var(--sk-input-radius, 6px) + 3px);
-  box-shadow: 0 0 16px color-mix(in srgb, var(--sk-primary, #2563eb) 55%, currentColor);
-  opacity: 0; transition: opacity .25s ease; pointer-events: none;
-}
-[data-sk-part="field-input-wrap"]:focus-within::before { opacity: .5; }
-/* One-shot lock-in ring when the field validates ([data-sk-valid] appears). */
-[data-sk-part="field-input-wrap"]::after {
-  content: ''; position: absolute; inset: 0;
-  border-radius: var(--sk-input-radius, 6px);
-  border: 2px solid color-mix(in srgb, var(--sk-primary, #2563eb) 72%, currentColor);
-  opacity: 0; pointer-events: none;
-}
-[data-sk-part="field-input-wrap"][data-sk-valid="true"]::after { animation: sk-lock-in .55s ease-out both; }
-.sk-tick {
-  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
-  width: 20px; height: 20px; border-radius: 50%;
-  background: color-mix(in srgb, var(--sk-primary, #2563eb) 72%, currentColor);
-  display: flex; align-items: center; justify-content: center;
-  animation: sk-tick-in .28s cubic-bezier(.22,1.4,.36,1) both;
-  pointer-events: none;
-}
-.sk-tick::after {
-  content: ''; position: absolute; inset: 0; border-radius: 50%;
-  border: 2px solid color-mix(in srgb, var(--sk-primary, #2563eb) 72%, currentColor);
-  animation: sk-tick-ring .55s ease-out .06s both;
-}
-.sk-tick path { stroke-dasharray: 14; stroke-dashoffset: 14; animation: sk-tick-draw .22s ease-out .12s forwards; }
-
-/* ---- Momentum meter ---- */
-.sk-momentum { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
-.sk-momentum-track {
-  flex: 1; position: relative; height: 8px; border-radius: 999px;
-  background: color-mix(in srgb, currentColor 14%, transparent);
-}
-.sk-momentum-fill {
-  position: relative; overflow: hidden;
-  height: 100%; border-radius: 999px;
-  background: color-mix(in srgb, var(--sk-primary, #2563eb) 72%, currentColor);
-  transition: width .45s cubic-bezier(.22,1,.36,1);
-}
-/* Continuous sheen sweep \u2014 the bar reads as live, not static chrome. */
-.sk-momentum-fill::after {
-  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
-  background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);
-  animation: sk-momentum-sheen 2.6s ease-in-out infinite;
-}
-/* One-shot white flash on each advance (keyed remount restarts it). */
-.sk-momentum-flash {
-  position: absolute; inset: 0; border-radius: 999px;
-  background: #fff; opacity: 0;
-  animation: sk-momentum-flash .5s ease-out;
-}
-/* Leading-edge spark rides the fill tip. */
-.sk-momentum-spark {
-  position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px;
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--sk-primary, #2563eb) 55%, currentColor);
-  animation: sk-spark-pulse 1.6s ease-in-out infinite;
-  transition: left .45s cubic-bezier(.22,1,.36,1);
-  pointer-events: none;
-}
-.sk-momentum[data-sk-momentum="0"] .sk-momentum-spark { opacity: 0; }
-.sk-momentum-label {
-  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
-  opacity: .75; font-variant-numeric: tabular-nums; white-space: nowrap;
-}
-/* Charged state: every requirement met \u2014 bar glows, sheen accelerates,
-   label flips to READY in brand. */
-.sk-momentum[data-sk-complete="true"] .sk-momentum-fill { animation: sk-fill-charge 1.8s ease-in-out infinite; }
-.sk-momentum[data-sk-complete="true"] .sk-momentum-fill::after { animation-duration: 1.4s; }
-.sk-momentum[data-sk-complete="true"] .sk-momentum-label {
-  opacity: 1;
-  color: color-mix(in srgb, var(--sk-primary, #2563eb) 60%, currentColor);
-  animation: sk-label-pop .4s cubic-bezier(.22,1.4,.36,1);
-}
-
-/* ---- DatePicker: the calendar morphs out of its tile and morphs back in
-   on selection (container-transform), and the picked date stamps in. ---- */
-@keyframes sk-cal-out { 0% { opacity: 0; transform: scale(.92) translateY(-8px) } 100% { opacity: 1; transform: scale(1) translateY(0) } }
-@keyframes sk-cal-in { 0% { opacity: 1; transform: scale(1) translateY(0) } 100% { opacity: 0; transform: scale(.94) translateY(-6px) } }
-@keyframes sk-cal-stamp { 0% { transform: scale(.9) } 60% { transform: scale(1.06) } 100% { transform: scale(1) } }
-.sk-datepicker__pop { transform-origin: top center; animation: sk-cal-out .28s cubic-bezier(.22,1.4,.36,1) both; }
-.sk-datepicker__pop[data-sk-closing="true"] { animation: sk-cal-in .18s ease-in both; }
-.sk-datepicker__value--stamp { display: inline-block; animation: sk-cal-stamp .3s cubic-bezier(.22,1.4,.36,1); }
-
-/* ---- Submit: wake on ready, pulse while submitting ---- */
-.sk-form__btn--submit { transition: transform .12s ease; }
-.sk-form__btn--submit:active { transform: scale(.97); }
-[data-sk-ready="true"] .sk-form__btn--submit {
-  animation: sk-btn-wake .5s cubic-bezier(.22,1.4,.36,1),
-             sk-btn-breathe 2.4s ease-in-out .5s infinite;
-}
-[data-sk-state="submitting"] .sk-form__btn--submit { animation: sk-submit-pulse 1.1s ease-in-out infinite; }
-[data-sk-state="submitting"] .sk-momentum-fill::after { animation-duration: .8s; }
-
-@media (prefers-reduced-motion: reduce) {
-  .sk-datepicker__pop { animation: none }
-  .sk-datepicker__pop[data-sk-closing="true"] { animation: none }
-  .sk-datepicker__value--stamp { animation: none }
-  .sk-tick { animation: none }
-  .sk-tick::after { animation: none; opacity: 0 }
-  .sk-tick path { animation: none; stroke-dashoffset: 0 }
-  [data-sk-part="field-input-wrap"] { transition: none }
-  [data-sk-part="field-input-wrap"]:focus-within { transform: none }
-  [data-sk-part="field-input-wrap"]::before { transition: none }
-  [data-sk-part="field-input-wrap"][data-sk-valid="true"]::after { animation: none }
-  .sk-momentum-fill { transition: none }
-  .sk-momentum-fill::after { animation: none; opacity: 0 }
-  .sk-momentum-flash { animation: none }
-  .sk-momentum-spark { animation: none; transition: none }
-  .sk-momentum[data-sk-complete="true"] .sk-momentum-fill { animation: none }
-  .sk-momentum[data-sk-complete="true"] .sk-momentum-label { animation: none }
-  .sk-form__btn--submit { transition: none }
-  [data-sk-ready="true"] .sk-form__btn--submit { animation: none }
-  [data-sk-state="submitting"] .sk-form__btn--submit { animation: none }
-}
-`;
-function DelightStyles() {
-  return /* @__PURE__ */ jsx("style", { id: STYLE_ID, dangerouslySetInnerHTML: { __html: CSS } });
-}
-function FieldValidTick() {
-  return /* @__PURE__ */ jsx("span", { className: "sk-tick", "data-sk-part": "field-valid-tick", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M3.5 8.5l3 3 6-6.5",
-      stroke: "var(--sk-form-success-check, #fff)",
-      strokeWidth: "2.4",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) }) });
-}
-function FormMomentum({ done, total }) {
-  if (total < 2) return null;
-  const pct = Math.round(Math.min(done, total) / total * 100);
-  const ready = done >= total;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "sk-momentum",
-      "data-sk-part": "momentum",
-      "data-sk-momentum": pct,
-      "data-sk-complete": ready ? "true" : void 0,
-      role: "progressbar",
-      "aria-valuenow": done,
-      "aria-valuemin": 0,
-      "aria-valuemax": total,
-      "aria-label": "Form progress",
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "sk-momentum-track", "data-sk-part": "momentum-track", children: [
-          /* @__PURE__ */ jsx("div", { className: "sk-momentum-fill", "data-sk-part": "momentum-fill", style: { width: `${pct}%` }, children: /* @__PURE__ */ jsx("span", { className: "sk-momentum-flash", "data-sk-part": "momentum-flash", "aria-hidden": "true" }, pct) }),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "sk-momentum-spark",
-              "data-sk-part": "momentum-spark",
-              style: { left: `calc(${pct}% - 5px)` },
-              "aria-hidden": "true"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("span", { className: "sk-momentum-label", "data-sk-part": "momentum-label", "aria-hidden": "true", children: ready ? "Ready" : `${done} of ${total}` })
-      ]
-    }
-  );
-}
-function normalizeOptions(options) {
-  if (!options) return [];
-  if (Array.isArray(options)) {
-    return options.map((opt) => {
-      if (typeof opt === "string") return { value: opt, label: opt };
-      if (typeof opt === "object" && opt !== null && "value" in opt && "label" in opt) return opt;
-      if (typeof opt === "object" && opt !== null && "label" in opt) return { value: opt.label, label: opt.label };
-      return { value: String(opt), label: String(opt) };
-    });
-  }
-  if (typeof options === "object" && options !== null) {
-    const obj = options;
-    if (Array.isArray(obj.choices)) return normalizeOptions(obj.choices);
-    if (Array.isArray(obj.items)) return normalizeOptions(obj.items);
-    if (Array.isArray(obj.options)) return normalizeOptions(obj.options);
-  }
-  return [];
-}
-function FormField({ field, value, error, onChange, onFocus, onBlur, classPrefix = "sk-form", showValid, controls }) {
-  const interactive = typeof onChange === "function";
-  const emit = (v) => onChange?.(v);
-  const bind = (v) => interactive ? { value: v, onChange: (e) => emit(e.target.value) } : { defaultValue: v || void 0 };
-  const inputId = `sk-${field.id || field.slug}`;
-  const options = normalizeOptions(field.options);
-  const baseInputStyle = {
-    width: "100%",
-    padding: "var(--sk-input-padding, 10px 12px)",
-    fontSize: "var(--sk-font-size, 16px)",
-    border: error ? "var(--sk-input-border-w, 1px) solid var(--sk-input-border-error, #dc2626)" : "var(--sk-input-border-w, 1px) solid var(--sk-input-border, #d1d5db)",
-    borderRadius: "var(--sk-input-radius, 6px)",
-    backgroundColor: "var(--sk-input-bg, #ffffff)",
-    // fg and bg MUST come from the same source. Inlining bg but letting color
-    // cascade from the section produced cream-on-white on brand-colored panels
-    // (found live). Default pairs with the white bg; theme both via vars.
-    //
-    // The fallback chain matters, and it is the reason this was broken on
-    // upforgelabs.com: a dark site that set --sk-input-bg and --sk-text-primary
-    // but never heard of --sk-input-text landed on #111827 over its own dark
-    // field, 1.03:1, an input you cannot read your own typing in. Falling
-    // through --sk-text-primary first means theming the page's text is enough.
-    color: "var(--sk-input-text, var(--sk-text-primary, #111827))",
-    outline: "none",
-    fontFamily: "inherit"
-  };
-  const labelStyle = {
-    display: "block",
-    marginBottom: 6,
-    fontWeight: "var(--sk-label-weight, 500)",
-    color: "var(--sk-label-color, inherit)"
-  };
-  const errorStyle = {
-    color: "var(--sk-error, #dc2626)",
-    fontSize: 14,
-    marginTop: 4
-  };
-  const helpStyle = {
-    color: "var(--sk-text-tertiary, #6b7280)",
-    fontSize: 14,
-    marginTop: 4
-  };
-  if (field.field_type === "heading" || field.field_type === "section_header") {
-    return /* @__PURE__ */ jsx("h3", { className: `${classPrefix}__heading`, style: { margin: "16px 0 8px", fontWeight: 600, fontSize: 18 }, children: field.label });
-  }
-  if (field.field_type === "paragraph") {
-    return /* @__PURE__ */ jsx("p", { className: `${classPrefix}__paragraph`, style: { color: "var(--sk-text-tertiary, #6b7280)", margin: "8px 0" }, children: field.help_text || field.label });
-  }
-  if (field.field_type === "hidden") {
-    return interactive ? /* @__PURE__ */ jsx("input", { type: "hidden", name: field.slug, value: String(value || ""), readOnly: true }) : /* @__PURE__ */ jsx("input", { type: "hidden", name: field.slug, defaultValue: String(value || "") });
-  }
-  const hideLabel = !!field.hide_label;
-  const effectivePlaceholder = hideLabel ? field.label : field.placeholder;
-  const focusProps = interactive && (onFocus || onBlur) ? {
-    onFocus: (e) => {
-      if (!e.currentTarget.contains(e.relatedTarget)) onFocus?.();
-    },
-    onBlur: (e) => {
-      if (!e.currentTarget.contains(e.relatedTarget)) onBlur?.();
-    }
-  } : {};
-  return /* @__PURE__ */ jsxs("div", { className: `${classPrefix}__field ${classPrefix}__field--${field.field_type}`, ...focusProps, children: [
-    /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: `${classPrefix}__label`, style: { ...labelStyle, ...hideLabel ? { position: "absolute", width: 1, height: 1, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap", border: 0 } : {} }, children: [
-      field.label,
-      field.is_required && /* @__PURE__ */ jsx("span", { style: { color: "var(--sk-error, #dc2626)" }, children: " *" })
-    ] }),
-    ["text", "email", "phone", "tel", "number"].includes(field.field_type) && /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, "data-sk-part": "field-input-wrap", "data-sk-valid": showValid ? "true" : void 0, children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          id: inputId,
-          className: `${classPrefix}__input`,
-          type: field.field_type === "phone" || field.field_type === "tel" ? "tel" : field.field_type,
-          name: field.slug,
-          ...bind(String(value || "")),
-          placeholder: effectivePlaceholder,
-          required: field.is_required,
-          style: baseInputStyle
-        }
-      ),
-      showValid && /* @__PURE__ */ jsx(FieldValidTick, {})
-    ] }),
-    field.field_type === "textarea" && /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        id: inputId,
-        className: `${classPrefix}__textarea`,
-        name: field.slug,
-        ...bind(String(value || "")),
-        placeholder: effectivePlaceholder,
-        required: field.is_required,
-        rows: 4,
-        style: { ...baseInputStyle, resize: "vertical" }
-      }
-    ),
-    field.field_type === "select" && /* @__PURE__ */ jsxs(
-      "select",
-      {
-        id: inputId,
-        className: `${classPrefix}__select`,
-        name: field.slug,
-        ...bind(String(value || "")),
-        required: field.is_required,
-        style: baseInputStyle,
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", children: effectivePlaceholder || "Select an option" }),
-          options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
-        ]
-      }
-    ),
-    field.field_type === "multi-select" && /* @__PURE__ */ jsx(
-      "select",
-      {
-        id: inputId,
-        className: `${classPrefix}__select ${classPrefix}__select--multi`,
-        name: field.slug,
-        ...interactive ? {
-          value: Array.isArray(value) ? value : [],
-          onChange: (e) => emit(Array.from(e.target.selectedOptions, (opt) => opt.value))
-        } : { defaultValue: Array.isArray(value) ? value : [] },
-        required: field.is_required,
-        multiple: true,
-        style: { ...baseInputStyle, height: 120 },
-        children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
-      }
-    ),
-    field.field_type === "radio" && /* @__PURE__ */ jsx("div", { className: `${classPrefix}__radio-group`, style: { display: "flex", flexDirection: "column", gap: 8 }, children: options.map((option) => /* @__PURE__ */ jsxs("label", { className: `${classPrefix}__radio-option`, style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "radio",
-          name: field.slug,
-          value: option.value,
-          ...interactive ? { checked: value === option.value, onChange: () => emit(option.value) } : { defaultChecked: value === option.value },
-          required: field.is_required
-        }
-      ),
-      option.label
-    ] }, option.value)) }),
-    field.field_type === "checkbox" && options.length === 0 && /* @__PURE__ */ jsxs("label", { className: `${classPrefix}__checkbox`, style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "checkbox",
-          name: field.slug,
-          ...interactive ? { checked: !!value, onChange: (e) => emit(e.target.checked) } : { defaultChecked: !!value },
-          required: field.is_required
-        }
-      ),
-      field.help_text || field.label
-    ] }),
-    field.field_type === "checkbox" && options.length > 0 && /* @__PURE__ */ jsx("div", { className: `${classPrefix}__checkbox-group`, style: { display: "flex", flexDirection: "column", gap: 8 }, children: options.map((option) => {
-      const selectedValues = Array.isArray(value) ? value : [];
-      const isChecked = selectedValues.includes(option.value);
-      return /* @__PURE__ */ jsxs("label", { className: `${classPrefix}__checkbox-option`, style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "checkbox",
-            name: field.slug,
-            value: option.value,
-            ...interactive ? {
-              checked: isChecked,
-              onChange: () => emit(
-                isChecked ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value]
-              )
-            } : { defaultChecked: isChecked }
-          }
-        ),
-        option.label
-      ] }, option.value);
-    }) }),
-    field.field_type === "date" && (interactive && controls?.Date ? /* @__PURE__ */ jsx(
-      controls.Date,
-      {
-        id: inputId,
-        name: field.slug,
-        value: String(value || ""),
-        onChange: emit,
-        required: field.is_required,
-        placeholder: field.placeholder || "Select a date",
-        className: `${classPrefix}__input ${classPrefix}__input--date`
-      }
-    ) : (
-      // Static: the browser's own date control. Same name and class, so
-      // the swap to DatePicker on enhancement is in place.
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          id: inputId,
-          className: `${classPrefix}__input ${classPrefix}__input--date`,
-          type: "date",
-          name: field.slug,
-          defaultValue: String(value || "") || void 0,
-          required: field.is_required,
-          style: baseInputStyle
-        }
-      )
-    )),
-    field.field_type === "time" && /* @__PURE__ */ jsx(
-      "input",
-      {
-        id: inputId,
-        className: `${classPrefix}__input ${classPrefix}__input--time`,
-        type: "time",
-        name: field.slug,
-        ...bind(String(value || "")),
-        required: field.is_required,
-        style: baseInputStyle
-      }
-    ),
-    field.field_type === "datetime" && /* @__PURE__ */ jsx(
-      "input",
-      {
-        id: inputId,
-        className: `${classPrefix}__input ${classPrefix}__input--datetime`,
-        type: "datetime-local",
-        name: field.slug,
-        ...bind(String(value || "")),
-        required: field.is_required,
-        style: baseInputStyle
-      }
-    ),
-    field.field_type === "file" && (interactive && controls?.File ? /* @__PURE__ */ jsx(
-      controls.File,
-      {
-        field,
-        inputId,
-        classPrefix,
-        baseInputStyle,
-        onChange: emit
-      }
-    ) : (
-      // Static: a real file input so the field is visible and labelled,
-      // but the Sonor upload only happens once enhanced.
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          id: inputId,
-          className: `${classPrefix}__input ${classPrefix}__input--file`,
-          type: "file",
-          name: field.slug,
-          required: field.is_required,
-          style: baseInputStyle
-        }
-      )
-    )),
-    field.field_type === "rating" && /* @__PURE__ */ jsxs("div", { className: `${classPrefix}__rating`, style: { display: "flex", gap: 4 }, role: interactive ? void 0 : "radiogroup", "aria-label": interactive ? void 0 : field.label, children: [
-      !interactive && [1, 2, 3, 4, 5].map((star) => (
-        // Static: a real radio group. Submits natively, and is reachable
-        // by keyboard and screen readers without any script.
-        /* @__PURE__ */ jsxs("label", { className: `${classPrefix}__rating-star`, style: { fontSize: 24, cursor: "pointer", color: value >= star ? "var(--sk-rating-active, #fbbf24)" : "var(--sk-rating-inactive, #d1d5db)" }, children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "radio",
-              name: field.slug,
-              value: star,
-              defaultChecked: value === star,
-              required: field.is_required && star === 1,
-              style: { position: "absolute", width: 1, height: 1, opacity: 0 }
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { "aria-label": `${star} star${star > 1 ? "s" : ""}`, children: "\u2605" })
-        ] }, `s${star}`)
-      )),
-      interactive && [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => emit(star),
-          className: `${classPrefix}__rating-star`,
-          style: {
-            background: "none",
-            border: "none",
-            fontSize: 24,
-            cursor: "pointer",
-            color: value >= star ? "var(--sk-rating-active, #fbbf24)" : "var(--sk-rating-inactive, #d1d5db)"
-          },
-          children: "\u2605"
-        },
-        star
-      ))
-    ] }),
-    field.field_type === "slider" && /* @__PURE__ */ jsxs("div", { className: `${classPrefix}__slider`, children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          id: inputId,
-          type: "range",
-          name: field.slug,
-          ...interactive ? { value: Number(value || 50), onChange: (e) => emit(Number(e.target.value)) } : { defaultValue: Number(value || 50) },
-          min: field.validation?.min || 0,
-          max: field.validation?.max || 100,
-          style: { width: "100%" }
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: `${classPrefix}__slider-value`, style: { textAlign: "center", marginTop: 4 }, children: String(value || 50) })
-    ] }),
-    error && /* @__PURE__ */ jsx("p", { className: `${classPrefix}__error`, style: errorStyle, children: error }),
-    field.help_text && !error && field.field_type !== "checkbox" && /* @__PURE__ */ jsx("p", { className: `${classPrefix}__help`, style: helpStyle, children: field.help_text })
-  ] });
-}
-
-export { DelightStyles, FormField, FormMomentum };
-//# sourceMappingURL=chunk-WRRVYPMY.mjs.map
-//# sourceMappingURL=chunk-WRRVYPMY.mjs.map

package/dist/chunk-WRRVYPMY.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/forms/delight.tsx","../src/forms/FormField.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"chunk-WRRVYPMY.mjs","sourcesContent":["'use client'\n\n/**\n * Form delight primitives — the interaction layer that makes filling a form\n * feel like progress instead of paperwork. Forms capture the lead; this is\n * conversion surface, not decoration.\n *\n * The bar: AAA-game onboarding. Nothing on screen is inert — the focused\n * field is lit, completing a field LOCKS IN, progress reads like a meter you\n * want to fill, and when the last requirement clears the submit button wakes\n * up. The arc: aura -> lock-in tick -> bar surges -> READY -> press start ->\n * celebration.\n *\n * - FieldValidTick: a check that draws itself the moment a field becomes\n *   valid (touched + non-empty + no error), with a ripple ring. The field\n *   wrap also flashes a one-shot lock-in ring via [data-sk-valid].\n * - FormMomentum: a fields-completed meter (not steps) — endowed progress;\n *   people finish bars they've started. Live sheen, advance flash, leading-\n *   edge spark, \"N of M\" label that flips to READY and charges the bar.\n * - [data-sk-ready] (set by FormClient when every required field validates\n *   on the final step) wakes the submit button: pop, then breathing glow.\n *\n * Same construction rules as FormCelebration: zero deps, one deduped style\n * tag, data-sk-part on everything, --sk-primary theming, reduced-motion\n * collapses animation to instant states.\n *\n * Contrast guarantee: forms routinely live in sections painted with the\n * brand color itself, where pure --sk-primary chrome is invisible (found\n * live: fill rgb(173,29,37) on section rgb(173,29,37)). Everything here\n * mixes toward currentColor — the section's text color must contrast with\n * the section background, so the mix guarantees the chrome does too.\n */\n\nimport React from 'react'\n\nconst STYLE_ID = 'sk-delight-css'\n\nconst CSS = `\n/* Every frame must carry the centering translateY: the animation fills both\n   directions, so a keyframe transform of scale() alone REPLACES the rule's\n   translateY(-50%) and drops the tick half its height below center. */\n@keyframes sk-tick-in {\n  0% { transform: translateY(-50%) scale(.3); opacity: 0 }\n  70% { transform: translateY(-50%) scale(1.15) }\n  100% { transform: translateY(-50%) scale(1); opacity: 1 }\n}\n@keyframes sk-tick-draw { to { stroke-dashoffset: 0 } }\n@keyframes sk-tick-ring { 0% { transform: scale(.5); opacity: .7 } 100% { transform: scale(2.2); opacity: 0 } }\n@keyframes sk-lock-in { 0% { opacity: .85; transform: scale(.985) } 100% { opacity: 0; transform: scale(1.012) } }\n@keyframes sk-momentum-sheen { 0% { transform: translateX(-120%) } 100% { transform: translateX(360%) } }\n@keyframes sk-momentum-flash { 0% { opacity: .55 } 100% { opacity: 0 } }\n@keyframes sk-spark-pulse {\n  0%, 100% { box-shadow: 0 0 4px 1px color-mix(in srgb, var(--sk-primary, #2563eb) 60%, currentColor) }\n  50% { box-shadow: 0 0 11px 2px color-mix(in srgb, var(--sk-primary, #2563eb) 60%, currentColor) }\n}\n@keyframes sk-fill-charge {\n  0%, 100% { box-shadow: 0 0 5px 0 color-mix(in srgb, var(--sk-primary, #2563eb) 55%, currentColor) }\n  50% { box-shadow: 0 0 13px 2px color-mix(in srgb, var(--sk-primary, #2563eb) 55%, currentColor) }\n}\n@keyframes sk-label-pop { 0% { transform: scale(.8) } 60% { transform: scale(1.15) } 100% { transform: scale(1) } }\n@keyframes sk-btn-wake { 0% { transform: scale(1) } 40% { transform: scale(1.04) } 100% { transform: scale(1) } }\n@keyframes sk-btn-breathe {\n  0%, 100% { filter: drop-shadow(0 0 0 transparent) }\n  50% { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--sk-primary, #2563eb) 60%, currentColor)) }\n}\n@keyframes sk-submit-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .6 } }\n\n/* ---- Field: aura, lift, lock-in, tick ---- */\n/* Flex, not the default inline formatting context: an <input> is inline-block,\n   so the wrapper would be a few px taller than the input (baseline descender\n   gap) and the absolutely-centered tick would sit visibly low. */\n[data-sk-part=\"field-input-wrap\"] { display: flex; align-items: center; transition: transform .18s ease; }\n[data-sk-part=\"field-input-wrap\"]:focus-within { transform: translateY(-2px); }\n/* Focus aura — the active field is the lit one. Glow-only pseudo (its own\n   box is transparent), so it never occludes the input. */\n[data-sk-part=\"field-input-wrap\"]::before {\n  content: ''; position: absolute; inset: -3px;\n  border-radius: calc(var(--sk-input-radius, 6px) + 3px);\n  box-shadow: 0 0 16px color-mix(in srgb, var(--sk-primary, #2563eb) 55%, currentColor);\n  opacity: 0; transition: opacity .25s ease; pointer-events: none;\n}\n[data-sk-part=\"field-input-wrap\"]:focus-within::before { opacity: .5; }\n/* One-shot lock-in ring when the field validates ([data-sk-valid] appears). */\n[data-sk-part=\"field-input-wrap\"]::after {\n  content: ''; position: absolute; inset: 0;\n  border-radius: var(--sk-input-radius, 6px);\n  border: 2px solid color-mix(in srgb, var(--sk-primary, #2563eb) 72%, currentColor);\n  opacity: 0; pointer-events: none;\n}\n[data-sk-part=\"field-input-wrap\"][data-sk-valid=\"true\"]::after { animation: sk-lock-in .55s ease-out both; }\n.sk-tick {\n  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);\n  width: 20px; height: 20px; border-radius: 50%;\n  background: color-mix(in srgb, var(--sk-primary, #2563eb) 72%, currentColor);\n  display: flex; align-items: center; justify-content: center;\n  animation: sk-tick-in .28s cubic-bezier(.22,1.4,.36,1) both;\n  pointer-events: none;\n}\n.sk-tick::after {\n  content: ''; position: absolute; inset: 0; border-radius: 50%;\n  border: 2px solid color-mix(in srgb, var(--sk-primary, #2563eb) 72%, currentColor);\n  animation: sk-tick-ring .55s ease-out .06s both;\n}\n.sk-tick path { stroke-dasharray: 14; stroke-dashoffset: 14; animation: sk-tick-draw .22s ease-out .12s forwards; }\n\n/* ---- Momentum meter ---- */\n.sk-momentum { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }\n.sk-momentum-track {\n  flex: 1; position: relative; height: 8px; border-radius: 999px;\n  background: color-mix(in srgb, currentColor 14%, transparent);\n}\n.sk-momentum-fill {\n  position: relative; overflow: hidden;\n  height: 100%; border-radius: 999px;\n  background: color-mix(in srgb, var(--sk-primary, #2563eb) 72%, currentColor);\n  transition: width .45s cubic-bezier(.22,1,.36,1);\n}\n/* Continuous sheen sweep — the bar reads as live, not static chrome. */\n.sk-momentum-fill::after {\n  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;\n  background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);\n  animation: sk-momentum-sheen 2.6s ease-in-out infinite;\n}\n/* One-shot white flash on each advance (keyed remount restarts it). */\n.sk-momentum-flash {\n  position: absolute; inset: 0; border-radius: 999px;\n  background: #fff; opacity: 0;\n  animation: sk-momentum-flash .5s ease-out;\n}\n/* Leading-edge spark rides the fill tip. */\n.sk-momentum-spark {\n  position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--sk-primary, #2563eb) 55%, currentColor);\n  animation: sk-spark-pulse 1.6s ease-in-out infinite;\n  transition: left .45s cubic-bezier(.22,1,.36,1);\n  pointer-events: none;\n}\n.sk-momentum[data-sk-momentum=\"0\"] .sk-momentum-spark { opacity: 0; }\n.sk-momentum-label {\n  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;\n  opacity: .75; font-variant-numeric: tabular-nums; white-space: nowrap;\n}\n/* Charged state: every requirement met — bar glows, sheen accelerates,\n   label flips to READY in brand. */\n.sk-momentum[data-sk-complete=\"true\"] .sk-momentum-fill { animation: sk-fill-charge 1.8s ease-in-out infinite; }\n.sk-momentum[data-sk-complete=\"true\"] .sk-momentum-fill::after { animation-duration: 1.4s; }\n.sk-momentum[data-sk-complete=\"true\"] .sk-momentum-label {\n  opacity: 1;\n  color: color-mix(in srgb, var(--sk-primary, #2563eb) 60%, currentColor);\n  animation: sk-label-pop .4s cubic-bezier(.22,1.4,.36,1);\n}\n\n/* ---- DatePicker: the calendar morphs out of its tile and morphs back in\n   on selection (container-transform), and the picked date stamps in. ---- */\n@keyframes sk-cal-out { 0% { opacity: 0; transform: scale(.92) translateY(-8px) } 100% { opacity: 1; transform: scale(1) translateY(0) } }\n@keyframes sk-cal-in { 0% { opacity: 1; transform: scale(1) translateY(0) } 100% { opacity: 0; transform: scale(.94) translateY(-6px) } }\n@keyframes sk-cal-stamp { 0% { transform: scale(.9) } 60% { transform: scale(1.06) } 100% { transform: scale(1) } }\n.sk-datepicker__pop { transform-origin: top center; animation: sk-cal-out .28s cubic-bezier(.22,1.4,.36,1) both; }\n.sk-datepicker__pop[data-sk-closing=\"true\"] { animation: sk-cal-in .18s ease-in both; }\n.sk-datepicker__value--stamp { display: inline-block; animation: sk-cal-stamp .3s cubic-bezier(.22,1.4,.36,1); }\n\n/* ---- Submit: wake on ready, pulse while submitting ---- */\n.sk-form__btn--submit { transition: transform .12s ease; }\n.sk-form__btn--submit:active { transform: scale(.97); }\n[data-sk-ready=\"true\"] .sk-form__btn--submit {\n  animation: sk-btn-wake .5s cubic-bezier(.22,1.4,.36,1),\n             sk-btn-breathe 2.4s ease-in-out .5s infinite;\n}\n[data-sk-state=\"submitting\"] .sk-form__btn--submit { animation: sk-submit-pulse 1.1s ease-in-out infinite; }\n[data-sk-state=\"submitting\"] .sk-momentum-fill::after { animation-duration: .8s; }\n\n@media (prefers-reduced-motion: reduce) {\n  .sk-datepicker__pop { animation: none }\n  .sk-datepicker__pop[data-sk-closing=\"true\"] { animation: none }\n  .sk-datepicker__value--stamp { animation: none }\n  .sk-tick { animation: none }\n  .sk-tick::after { animation: none; opacity: 0 }\n  .sk-tick path { animation: none; stroke-dashoffset: 0 }\n  [data-sk-part=\"field-input-wrap\"] { transition: none }\n  [data-sk-part=\"field-input-wrap\"]:focus-within { transform: none }\n  [data-sk-part=\"field-input-wrap\"]::before { transition: none }\n  [data-sk-part=\"field-input-wrap\"][data-sk-valid=\"true\"]::after { animation: none }\n  .sk-momentum-fill { transition: none }\n  .sk-momentum-fill::after { animation: none; opacity: 0 }\n  .sk-momentum-flash { animation: none }\n  .sk-momentum-spark { animation: none; transition: none }\n  .sk-momentum[data-sk-complete=\"true\"] .sk-momentum-fill { animation: none }\n  .sk-momentum[data-sk-complete=\"true\"] .sk-momentum-label { animation: none }\n  .sk-form__btn--submit { transition: none }\n  [data-sk-ready=\"true\"] .sk-form__btn--submit { animation: none }\n  [data-sk-state=\"submitting\"] .sk-form__btn--submit { animation: none }\n}\n`\n\nexport function DelightStyles() {\n  return <style id={STYLE_ID} dangerouslySetInnerHTML={{ __html: CSS }} />\n}\n\n/** Draw-in check shown inside a field wrapper once the value validates. */\nexport function FieldValidTick() {\n  return (\n    <span className=\"sk-tick\" data-sk-part=\"field-valid-tick\" aria-hidden=\"true\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n        <path\n          d=\"M3.5 8.5l3 3 6-6.5\"\n          stroke=\"var(--sk-form-success-check, #fff)\"\n          strokeWidth=\"2.4\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </span>\n  )\n}\n\nexport interface FormMomentumProps {\n  /** Completed required+visible fields. */\n  done: number\n  /** Total required+visible fields. */\n  total: number\n}\n\n/**\n * Fields-completed meter. Hidden when there is nothing to measure (0-1\n * required fields) — a bar that fills in one keystroke reads as noise.\n */\nexport function FormMomentum({ done, total }: FormMomentumProps) {\n  if (total < 2) return null\n  const pct = Math.round((Math.min(done, total) / total) * 100)\n  const ready = done >= total\n  return (\n    <div\n      className=\"sk-momentum\"\n      data-sk-part=\"momentum\"\n      data-sk-momentum={pct}\n      data-sk-complete={ready ? 'true' : undefined}\n      role=\"progressbar\"\n      aria-valuenow={done}\n      aria-valuemin={0}\n      aria-valuemax={total}\n      aria-label=\"Form progress\"\n    >\n      <div className=\"sk-momentum-track\" data-sk-part=\"momentum-track\">\n        <div className=\"sk-momentum-fill\" data-sk-part=\"momentum-fill\" style={{ width: `${pct}%` }}>\n          {/* keyed by pct: remounts on every advance, replaying the flash */}\n          <span key={pct} className=\"sk-momentum-flash\" data-sk-part=\"momentum-flash\" aria-hidden=\"true\" />\n        </div>\n        <span\n          className=\"sk-momentum-spark\"\n          data-sk-part=\"momentum-spark\"\n          style={{ left: `calc(${pct}% - 5px)` }}\n          aria-hidden=\"true\"\n        />\n      </div>\n      <span className=\"sk-momentum-label\" data-sk-part=\"momentum-label\" aria-hidden=\"true\">\n        {ready ? 'Ready' : `${done} of ${total}`}\n      </span>\n    </div>\n  )\n}\n","/**\n * @sonordev/site-kit/forms - Form Field Component\n *\n * Renders individual form fields based on type.\n *\n * Styling Options:\n * 1. Use CSS variables to customize the default styles\n * 2. Use the `className` prop on ManagedForm for scoped styles\n * 3. Use the custom render function for complete control\n *\n * CSS Variables (set these in your stylesheet or import brand.css):\n * --sk-input-bg: #ffffff\n * --sk-input-text: #111827   (pairs with --sk-input-bg; falls back to\n *                            --sk-text-primary, so a themed site is covered)\n * --sk-input-border: #d1d5db\n * --sk-input-border-w: 1px\n * --sk-input-border-focus: #2563eb\n * --sk-input-border-error: #dc2626\n * --sk-input-radius: 0.375rem\n * --sk-input-padding: 10px 12px\n * --sk-label-color: inherit\n * --sk-label-weight: 500\n * --sk-error: #dc2626\n * --sk-text-tertiary: #6b7280\n * --sk-font-size: 16px\n */\n\nimport React from 'react'\nimport { FieldValidTick } from './delight'\nimport type { FormField as FormFieldType } from './types'\n\ninterface FormFieldProps {\n  /** Render the valid-state tick (touched + validated). Text-like fields only. */\n  showValid?: boolean\n  field: FormFieldType\n  value?: unknown\n  error?: string\n  /**\n   * Omit to render STATIC mode: uncontrolled native controls with\n   * `defaultValue`, no React state, no event handlers. That is what lets a\n   * Server Component render a complete, submittable form with zero client\n   * JavaScript (see StaticForm.tsx). Pass a handler for the usual controlled\n   * behaviour once the enhancement hydrates.\n   *\n   * The two modes MUST emit the same element/class structure — the\n   * enhancement replaces the shell in place, and a mismatch shows up as a\n   * visible jump. field-parity.test.tsx pins this.\n   */\n  onChange?: (value: unknown) => void\n  /**\n   * Focus entered / left this field, for form analytics (`field_interactions`).\n   * Interactive mode only; static mode renders no handlers of any kind.\n   */\n  onFocus?: () => void\n  onBlur?: () => void\n  /** Optional class name prefix for custom styling */\n  classPrefix?: string\n  /**\n   * Client-only controls, injected by FormClient. DatePicker and FileField\n   * carry hooks; importing them here would pull them into this module's chunk\n   * and the build would stamp the whole thing `'use client'`, so a Server\n   * Component rendering one text input would ship the date picker too.\n   * Injection keeps this file hook-free and therefore server-renderable.\n   * Absent = static mode falls back to the native control.\n   */\n  controls?: {\n    Date?: React.ComponentType<any>\n    File?: React.ComponentType<any>\n  }\n}\n\n/**\n * Normalize options from various DB formats into [{value, label}]\n * Handles:\n *  - [{value, label}] → pass through\n *  - {choices: [\"A\", \"B\"]} → [{value: \"A\", label: \"A\"}, ...]\n *  - [\"A\", \"B\"] → [{value: \"A\", label: \"A\"}, ...]\n */\nfunction normalizeOptions(options: unknown): { value: string; label: string }[] {\n  if (!options) return []\n  if (Array.isArray(options)) {\n    return options.map((opt) => {\n      if (typeof opt === 'string') return { value: opt, label: opt }\n      if (typeof opt === 'object' && opt !== null && 'value' in opt && 'label' in opt) return opt as { value: string; label: string }\n      if (typeof opt === 'object' && opt !== null && 'label' in opt) return { value: (opt as any).label, label: (opt as any).label }\n      return { value: String(opt), label: String(opt) }\n    })\n  }\n  if (typeof options === 'object' && options !== null) {\n    const obj = options as Record<string, unknown>\n    if (Array.isArray(obj.choices)) return normalizeOptions(obj.choices)\n    if (Array.isArray(obj.items)) return normalizeOptions(obj.items)\n    if (Array.isArray(obj.options)) return normalizeOptions(obj.options)\n  }\n  return []\n}\n\nexport function FormField({ field, value, error, onChange, onFocus, onBlur, classPrefix = 'sk-form' , showValid, controls }: FormFieldProps) {\n  // Static mode: no handler, so render native uncontrolled controls. The\n  // browser owns the value and a native form POST still carries it.\n  const interactive = typeof onChange === 'function'\n  const emit = (v: unknown) => onChange?.(v)\n  /** value/onChange when interactive, defaultValue when static. */\n  const bind = (v: string) =>\n    interactive\n      ? { value: v, onChange: (e: any) => emit(e.target.value) }\n      : { defaultValue: v || undefined }\n  // Stable id from field (no hooks - avoids \"Rendered fewer hooks than expected\" with early returns)\n  const inputId = `sk-${(field as { id?: string }).id || field.slug}`\n  // Normalize options once\n  const options = normalizeOptions(field.options)\n  // Use CSS variables with inline style fallbacks\n  const baseInputStyle: React.CSSProperties = {\n    width: '100%',\n    padding: 'var(--sk-input-padding, 10px 12px)',\n    fontSize: 'var(--sk-font-size, 16px)',\n    border: error\n      ? 'var(--sk-input-border-w, 1px) solid var(--sk-input-border-error, #dc2626)'\n      : 'var(--sk-input-border-w, 1px) solid var(--sk-input-border, #d1d5db)',\n    borderRadius: 'var(--sk-input-radius, 6px)',\n    backgroundColor: 'var(--sk-input-bg, #ffffff)',\n    // fg and bg MUST come from the same source. Inlining bg but letting color\n    // cascade from the section produced cream-on-white on brand-colored panels\n    // (found live). Default pairs with the white bg; theme both via vars.\n    //\n    // The fallback chain matters, and it is the reason this was broken on\n    // upforgelabs.com: a dark site that set --sk-input-bg and --sk-text-primary\n    // but never heard of --sk-input-text landed on #111827 over its own dark\n    // field, 1.03:1, an input you cannot read your own typing in. Falling\n    // through --sk-text-primary first means theming the page's text is enough.\n    color: 'var(--sk-input-text, var(--sk-text-primary, #111827))',\n    outline: 'none',\n    fontFamily: 'inherit',\n  }\n  \n  const labelStyle: React.CSSProperties = {\n    display: 'block',\n    marginBottom: 6,\n    fontWeight: 'var(--sk-label-weight, 500)' as any,\n    color: 'var(--sk-label-color, inherit)',\n  }\n  \n  const errorStyle: React.CSSProperties = {\n    color: 'var(--sk-error, #dc2626)',\n    fontSize: 14,\n    marginTop: 4,\n  }\n  \n  const helpStyle: React.CSSProperties = {\n    color: 'var(--sk-text-tertiary, #6b7280)',\n    fontSize: 14,\n    marginTop: 4,\n  }\n  \n  // Heading / Section Header (display only)\n  if (field.field_type === 'heading' || field.field_type === 'section_header') {\n    return <h3 className={`${classPrefix}__heading`} style={{ margin: '16px 0 8px', fontWeight: 600, fontSize: 18 }}>{field.label}</h3>\n  }\n  \n  // Paragraph (display only)\n  if (field.field_type === 'paragraph') {\n    return <p className={`${classPrefix}__paragraph`} style={{ color: 'var(--sk-text-tertiary, #6b7280)', margin: '8px 0' }}>{field.help_text || field.label}</p>\n  }\n  \n  // Hidden field\n  if (field.field_type === 'hidden') {\n    return interactive\n      ? <input type=\"hidden\" name={field.slug} value={String(value || '')} readOnly />\n      : <input type=\"hidden\" name={field.slug} defaultValue={String(value || '')} />\n  }\n\n  const hideLabel = !!(field as { hide_label?: boolean }).hide_label\n  const effectivePlaceholder = hideLabel ? field.label : field.placeholder\n\n  // Focus reporting sits on the wrapper, so every control inside (radios, the\n  // date picker, the file button) reports as this one field. Moves between\n  // controls inside the same field are not a new visit to it.\n  const focusProps = interactive && (onFocus || onBlur)\n    ? {\n        onFocus: (e: React.FocusEvent<HTMLDivElement>) => {\n          if (!e.currentTarget.contains(e.relatedTarget as Node | null)) onFocus?.()\n        },\n        onBlur: (e: React.FocusEvent<HTMLDivElement>) => {\n          if (!e.currentTarget.contains(e.relatedTarget as Node | null)) onBlur?.()\n        },\n      }\n    : {}\n\n  return (\n    <div className={`${classPrefix}__field ${classPrefix}__field--${field.field_type}`} {...focusProps}>\n      <label htmlFor={inputId} className={`${classPrefix}__label`} style={{ ...labelStyle, ...(hideLabel ? { position: 'absolute', width: 1, height: 1, padding: 0, margin: -1, overflow: 'hidden', clip: 'rect(0,0,0,0)', whiteSpace: 'nowrap', border: 0 } : {}) }}>\n        {field.label}\n        {field.is_required && <span style={{ color: 'var(--sk-error, #dc2626)' }}> *</span>}\n      </label>\n      \n      {/* Text, Email, Phone/Tel, Number — relative wrapper hosts the valid tick */}\n      {['text', 'email', 'phone', 'tel', 'number'].includes(field.field_type) && (\n        <div style={{ position: 'relative' }} data-sk-part=\"field-input-wrap\" data-sk-valid={showValid ? 'true' : undefined}>\n          <input\n            id={inputId}\n            className={`${classPrefix}__input`}\n            type={field.field_type === 'phone' || field.field_type === 'tel' ? 'tel' : field.field_type}\n            name={field.slug}\n            {...bind(String(value || ''))}\n            placeholder={effectivePlaceholder}\n            required={field.is_required}\n            style={baseInputStyle}\n          />\n          {showValid && <FieldValidTick />}\n        </div>\n      )}\n      \n      {/* Textarea */}\n      {field.field_type === 'textarea' && (\n        <textarea\n          id={inputId}\n          className={`${classPrefix}__textarea`}\n          name={field.slug}\n          {...bind(String(value || ''))}\n          placeholder={effectivePlaceholder}\n          required={field.is_required}\n          rows={4}\n          style={{ ...baseInputStyle, resize: 'vertical' }}\n        />\n      )}\n      \n      {/* Select */}\n      {field.field_type === 'select' && (\n        <select\n          id={inputId}\n          className={`${classPrefix}__select`}\n          name={field.slug}\n          {...bind(String(value || ''))}\n          required={field.is_required}\n          style={baseInputStyle}\n        >\n          <option value=\"\">{effectivePlaceholder || 'Select an option'}</option>\n          {options.map((option) => (\n            <option key={option.value} value={option.value}>\n              {option.label}\n            </option>\n          ))}\n        </select>\n      )}\n      \n      {/* Multi-select */}\n      {field.field_type === 'multi-select' && (\n        <select\n          id={inputId}\n          className={`${classPrefix}__select ${classPrefix}__select--multi`}\n          name={field.slug}\n          {...(interactive\n            ? {\n                value: Array.isArray(value) ? (value as string[]) : [],\n                onChange: (e: any) =>\n                  emit(Array.from(e.target.selectedOptions, (opt: any) => opt.value)),\n              }\n            : { defaultValue: Array.isArray(value) ? (value as string[]) : [] })}\n          required={field.is_required}\n          multiple\n          style={{ ...baseInputStyle, height: 120 }}\n        >\n          {options.map((option) => (\n            <option key={option.value} value={option.value}>\n              {option.label}\n            </option>\n          ))}\n        </select>\n      )}\n      \n      {/* Radio */}\n      {field.field_type === 'radio' && (\n        <div className={`${classPrefix}__radio-group`} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>\n          {options.map((option) => (\n            <label key={option.value} className={`${classPrefix}__radio-option`} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n              <input\n                type=\"radio\"\n                name={field.slug}\n                value={option.value}\n                {...(interactive\n                  ? { checked: value === option.value, onChange: () => emit(option.value) }\n                  : { defaultChecked: value === option.value })}\n                required={field.is_required}\n              />\n              {option.label}\n            </label>\n          ))}\n        </div>\n      )}\n      \n      {/* Checkbox (single) */}\n      {field.field_type === 'checkbox' && options.length === 0 && (\n        <label className={`${classPrefix}__checkbox`} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n          <input\n            type=\"checkbox\"\n            name={field.slug}\n            {...(interactive\n              ? { checked: !!value, onChange: (e: any) => emit(e.target.checked) }\n              : { defaultChecked: !!value })}\n            required={field.is_required}\n          />\n          {field.help_text || field.label}\n        </label>\n      )}\n      \n      {/* Checkbox (multiple options) */}\n      {field.field_type === 'checkbox' && options.length > 0 && (\n        <div className={`${classPrefix}__checkbox-group`} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>\n          {options.map((option) => {\n            const selectedValues = Array.isArray(value) ? value : []\n            const isChecked = selectedValues.includes(option.value)\n            \n            return (\n              <label key={option.value} className={`${classPrefix}__checkbox-option`} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n                <input\n                  type=\"checkbox\"\n                  name={field.slug}\n                  value={option.value}\n                  {...(interactive\n                    ? {\n                        checked: isChecked,\n                        onChange: () =>\n                          emit(\n                            isChecked\n                              ? selectedValues.filter((v) => v !== option.value)\n                              : [...selectedValues, option.value],\n                          ),\n                      }\n                    : { defaultChecked: isChecked })}\n                />\n                {option.label}\n              </label>\n            )\n          })}\n        </div>\n      )}\n      \n      {/* Date - Custom calendar picker */}\n      {field.field_type === 'date' && (\n        interactive && controls?.Date ? (\n          <controls.Date\n            id={inputId}\n            name={field.slug}\n            value={String(value || '')}\n            onChange={emit}\n            required={field.is_required}\n            placeholder={field.placeholder || 'Select a date'}\n            className={`${classPrefix}__input ${classPrefix}__input--date`}\n          />\n        ) : (\n          // Static: the browser's own date control. Same name and class, so\n          // the swap to DatePicker on enhancement is in place.\n          <input\n            id={inputId}\n            className={`${classPrefix}__input ${classPrefix}__input--date`}\n            type=\"date\"\n            name={field.slug}\n            defaultValue={String(value || '') || undefined}\n            required={field.is_required}\n            style={baseInputStyle}\n          />\n        )\n      )}\n      \n      {/* Time */}\n      {field.field_type === 'time' && (\n        <input\n          id={inputId}\n          className={`${classPrefix}__input ${classPrefix}__input--time`}\n          type=\"time\"\n          name={field.slug}\n          {...bind(String(value || ''))}\n          required={field.is_required}\n          style={baseInputStyle}\n        />\n      )}\n      \n      {/* DateTime */}\n      {field.field_type === 'datetime' && (\n        <input\n          id={inputId}\n          className={`${classPrefix}__input ${classPrefix}__input--datetime`}\n          type=\"datetime-local\"\n          name={field.slug}\n          {...bind(String(value || ''))}\n          required={field.is_required}\n          style={baseInputStyle}\n        />\n      )}\n      \n      {/* File */}\n      {field.field_type === 'file' && (\n        interactive && controls?.File ? (\n          <controls.File\n            field={field}\n            inputId={inputId}\n            classPrefix={classPrefix}\n            baseInputStyle={baseInputStyle}\n            onChange={emit}\n          />\n        ) : (\n          // Static: a real file input so the field is visible and labelled,\n          // but the Sonor upload only happens once enhanced.\n          <input\n            id={inputId}\n            className={`${classPrefix}__input ${classPrefix}__input--file`}\n            type=\"file\"\n            name={field.slug}\n            required={field.is_required}\n            style={baseInputStyle}\n          />\n        )\n      )}\n      \n      {/* Rating */}\n      {field.field_type === 'rating' && (\n        <div className={`${classPrefix}__rating`} style={{ display: 'flex', gap: 4 }} role={interactive ? undefined : 'radiogroup'} aria-label={interactive ? undefined : field.label}>\n          {!interactive && [1, 2, 3, 4, 5].map((star) => (\n            // Static: a real radio group. Submits natively, and is reachable\n            // by keyboard and screen readers without any script.\n            <label key={`s${star}`} className={`${classPrefix}__rating-star`} style={{ fontSize: 24, cursor: 'pointer', color: (value as number) >= star ? 'var(--sk-rating-active, #fbbf24)' : 'var(--sk-rating-inactive, #d1d5db)' }}>\n              <input\n                type=\"radio\"\n                name={field.slug}\n                value={star}\n                defaultChecked={(value as number) === star}\n                required={field.is_required && star === 1}\n                style={{ position: 'absolute', width: 1, height: 1, opacity: 0 }}\n              />\n              <span aria-label={`${star} star${star > 1 ? 's' : ''}`}>★</span>\n            </label>\n          ))}\n          {interactive && [1, 2, 3, 4, 5].map((star) => (\n            <button\n              key={star}\n              type=\"button\"\n              onClick={() => emit(star)}\n              className={`${classPrefix}__rating-star`}\n              style={{\n                background: 'none',\n                border: 'none',\n                fontSize: 24,\n                cursor: 'pointer',\n                color: (value as number) >= star ? 'var(--sk-rating-active, #fbbf24)' : 'var(--sk-rating-inactive, #d1d5db)',\n              }}\n            >\n              ★\n            </button>\n          ))}\n        </div>\n      )}\n      \n      {/* Slider */}\n      {field.field_type === 'slider' && (\n        <div className={`${classPrefix}__slider`}>\n          <input\n            id={inputId}\n            type=\"range\"\n            name={field.slug}\n            {...(interactive\n              ? { value: Number(value || 50), onChange: (e: any) => emit(Number(e.target.value)) }\n              : { defaultValue: Number(value || 50) })}\n            min={field.validation?.min || 0}\n            max={field.validation?.max || 100}\n            style={{ width: '100%' }}\n          />\n          <div className={`${classPrefix}__slider-value`} style={{ textAlign: 'center', marginTop: 4 }}>{String(value || 50)}</div>\n        </div>\n      )}\n      \n      {/* Error message */}\n      {error && <p className={`${classPrefix}__error`} style={errorStyle}>{error}</p>}\n      \n      {/* Help text */}\n      {field.help_text && !error && field.field_type !== 'checkbox' && (\n        <p className={`${classPrefix}__help`} style={helpStyle}>{field.help_text}</p>\n      )}\n    </div>\n  )\n}\n"]}