@sonordev/site-kit 6.4.0 → 7.0.0

package/dist/chunk-QPEEKFCA.js

@@ -0,0 +1,533 @@
+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 };

package/dist/chunk-QXMIKDOL.js

@@ -0,0 +1,125 @@
+import { resolvePublicationUrl, createPublicationRoutes } from './chunk-WMVK77ND.js';
+
+// src/articles/artwork.ts
+function resolveArticleArtwork(post, placement = "card") {
+  const editorial = placement === "article" && !!post.editorial_image;
+  const src = (editorial ? post.editorial_image : post.featured_image) || void 0;
+  const alt = editorial ? post.editorial_image_alt ?? "" : post.featured_image_alt ?? post.title ?? "";
+  let composed = false;
+  if (src) {
+    try {
+      composed = /\/Blog\/Cards\//i.test(new URL(src, "https://site-kit.invalid").pathname);
+    } catch {
+    }
+  }
+  return { src, alt, composed };
+}
+function articleArtworkImageStyle(artwork) {
+  return artwork.composed ? { display: "block", height: "auto", maxHeight: "none", objectFit: "contain", transform: "none" } : void 0;
+}
+
+// src/articles/author-schema.ts
+var ARTICLE_TYPES = /* @__PURE__ */ new Set(["Article", "BlogPosting", "NewsArticle", "TechArticle", "Report", "ScholarlyArticle"]);
+function isAbsoluteUrl(value) {
+  return /^https?:\/\//i.test(value);
+}
+function routedAuthorPageUrl(author, options) {
+  return resolvePublicationUrl(createPublicationRoutes(options).author(author.slug), options.siteUrl ?? "");
+}
+function authorProfileUrl(author, options) {
+  return author.author_page_url?.trim() || routedAuthorPageUrl(author, options);
+}
+function authorEntityId(author, profileUrl) {
+  const explicit = author.entity_id?.trim();
+  if (explicit) return explicit;
+  if (!profileUrl || !isAbsoluteUrl(profileUrl)) return void 0;
+  return `${profileUrl.replace(/#.*$/, "")}#person`;
+}
+function generateAuthorPersonSchema(author, options = {}) {
+  const { siteUrl, siteName } = options;
+  const sameAs = [...author.same_as || []];
+  if (author.linkedin_url) sameAs.push(author.linkedin_url);
+  if (author.twitter_url) sameAs.push(author.twitter_url);
+  if (author.website_url) sameAs.push(author.website_url);
+  if (author.social_links?.twitter) sameAs.push(`https://twitter.com/${author.social_links.twitter}`);
+  if (author.social_links?.linkedin) sameAs.push(author.social_links.linkedin);
+  if (author.social_links?.github) sameAs.push(`https://github.com/${author.social_links.github}`);
+  const uniqueSameAs = [...new Set(sameAs.filter(Boolean))];
+  const url = authorProfileUrl(author, options);
+  const id = authorEntityId(author, url);
+  const person = {
+    "@type": "Person",
+    ...id ? { "@id": id } : {},
+    name: author.name,
+    url
+  };
+  if (author.title) person.jobTitle = author.title;
+  if (author.company || siteName) {
+    person.worksFor = {
+      "@type": "Organization",
+      name: author.company || siteName,
+      ...siteUrl ? { url: siteUrl } : {}
+    };
+  }
+  if (author.bio || author.short_bio) person.description = author.short_bio || author.bio;
+  if (author.avatar_url) person.image = author.avatar_url;
+  if (uniqueSameAs.length > 0) person.sameAs = uniqueSameAs;
+  if (author.knows_about && author.knows_about.length > 0) person.knowsAbout = author.knows_about;
+  if (author.credentials && author.credentials.length > 0) {
+    person.hasCredential = author.credentials.map((c) => ({
+      "@type": "EducationalOccupationalCredential",
+      credentialCategory: c
+    }));
+  }
+  return person;
+}
+function generateAuthorSchema(author, options = {}) {
+  const pageUrl = routedAuthorPageUrl(author, options);
+  const schema = {
+    "@context": "https://schema.org",
+    "@type": "ProfilePage",
+    ...isAbsoluteUrl(pageUrl) ? { "@id": `${pageUrl}#profilepage` } : {},
+    url: pageUrl,
+    name: author.name,
+    mainEntity: generateAuthorPersonSchema(author, options)
+  };
+  if (author.created_at) schema.dateCreated = author.created_at;
+  if (author.updated_at) schema.dateModified = author.updated_at;
+  return schema;
+}
+function generateArticleAuthorNode(author, options = {}) {
+  if (!author) return void 0;
+  if (typeof author === "string") {
+    const name = author.trim();
+    return name ? { "@type": "Person", name } : void 0;
+  }
+  if (!author.name) return void 0;
+  const url = author.author_page_url?.trim() || (options.authorPages && author.slug ? routedAuthorPageUrl(author, options) : void 0);
+  const id = authorEntityId(author, url);
+  return {
+    "@type": "Person",
+    ...id ? { "@id": id } : {},
+    name: author.name,
+    ...url ? { url } : {}
+  };
+}
+function withArticleAuthorIdentity(node, author, options = {}) {
+  if (!node || typeof node !== "object" || Array.isArray(node)) return node;
+  const record = node;
+  const types = [].concat(record["@type"]);
+  if (!types.some((t) => typeof t === "string" && ARTICLE_TYPES.has(t))) return node;
+  const stored = record.author;
+  if (!stored || typeof stored !== "object" || Array.isArray(stored)) return node;
+  const byline = stored;
+  if (byline["@type"] !== "Person" || typeof byline.name !== "string") return node;
+  const identity = generateArticleAuthorNode(author, options);
+  if (!identity || typeof identity.name !== "string") return node;
+  if (identity.name.trim().toLowerCase() !== byline.name.trim().toLowerCase()) return node;
+  const additions = {};
+  if (!byline["@id"] && identity["@id"]) additions["@id"] = identity["@id"];
+  if (!byline.url && identity.url) additions.url = identity.url;
+  if (Object.keys(additions).length === 0) return node;
+  return { ...record, author: { ...byline, ...additions } };
+}
+
+export { articleArtworkImageStyle, authorEntityId, generateArticleAuthorNode, generateAuthorPersonSchema, generateAuthorSchema, resolveArticleArtwork, withArticleAuthorIdentity };