@viveksinghind/narrative-form-react 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1809 @@
+import React, { createContext, useState, useRef, useCallback, useEffect, useContext, useMemo } from 'react';
+import { validateField, hasAsyncValidation, validateFieldAsync, FormStateEngine, mergeStrings, fetchFormConfig } from '@viveksinghind/narrative-form-core';
+export { FormStateEngine, clearValidators, defaultStrings, getRegisteredValidatorNames, getValidator, hasAsyncValidation, hasValidator, mergeStrings, registerBuiltinValidators, registerValidator, unregisterValidator, validateField, validateFieldAsync } from '@viveksinghind/narrative-form-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/NarrativeForm.tsx
+function useFormState(fields) {
+  const [, setTick] = useState(0);
+  const engineRef = useRef(null);
+  if (engineRef.current === null) {
+    engineRef.current = new FormStateEngine(fields, () => {
+      setTick((t) => t + 1);
+    });
+  }
+  const engine = engineRef.current;
+  const startTyping = useCallback((key) => engine.startTyping(key), [engine]);
+  const activateField = useCallback((key) => engine.activateField(key), [engine]);
+  const confirmField = useCallback(
+    (key, value) => engine.confirmField(key, value),
+    [engine]
+  );
+  const editField = useCallback((key) => engine.editField(key), [engine]);
+  const reconfirmField = useCallback(
+    (key, value) => engine.reconfirmField(key, value),
+    [engine]
+  );
+  const next = useCallback(() => engine.next(), [engine]);
+  const focusField = useCallback((key) => engine.focusField(key), [engine]);
+  const reset = useCallback(() => engine.reset(), [engine]);
+  const getValues = useCallback(() => engine.getValues(), [engine]);
+  const getMeta = useCallback(
+    (formId, formVersion) => engine.getMeta(formId, formVersion),
+    [engine]
+  );
+  const snapshot = engine.getSnapshot();
+  return useMemo(
+    () => ({
+      snapshot,
+      startTyping,
+      activateField,
+      confirmField,
+      editField,
+      reconfirmField,
+      next,
+      focusField,
+      reset,
+      getValues,
+      getMeta
+    }),
+    // snapshot changes every tick, which is what we want
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [snapshot]
+  );
+}
+function useDynamicForm({
+  fieldsUrl,
+  fieldsUrlHeaders,
+  formConfig,
+  onFetchError
+}) {
+  const [config, setConfig] = useState(formConfig != null ? formConfig : null);
+  const [loading, setLoading] = useState(!!fieldsUrl && !formConfig);
+  const [error, setError] = useState(null);
+  const [retryCount, setRetryCount] = useState(0);
+  useEffect(() => {
+    if (formConfig) {
+      setConfig(formConfig);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+    if (!fieldsUrl) {
+      return;
+    }
+    let isMounted = true;
+    setLoading(true);
+    setError(null);
+    fetchFormConfig(fieldsUrl, { headers: fieldsUrlHeaders }).then((data) => {
+      if (isMounted) {
+        setConfig(data);
+        setLoading(false);
+      }
+    }).catch((err) => {
+      if (isMounted) {
+        setError(err);
+        setLoading(false);
+        onFetchError == null ? void 0 : onFetchError(err);
+      }
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [fieldsUrl, fieldsUrlHeaders, formConfig, retryCount, onFetchError]);
+  const retry = useCallback(() => {
+    if (fieldsUrl && !formConfig) {
+      setRetryCount((c) => c + 1);
+    }
+  }, [fieldsUrl, formConfig]);
+  return { config, loading, error, retry };
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function useTypewriter(options) {
+  const { text, speed = 38, enabled = true, pauseAfter = 100, onComplete } = options;
+  const [charIndex, setCharIndex] = useState(0);
+  const [isComplete, setIsComplete] = useState(false);
+  const intervalRef = useRef(null);
+  const pauseTimeoutRef = useRef(null);
+  const onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
+  const cleanup = useCallback(() => {
+    if (intervalRef.current !== null) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    if (pauseTimeoutRef.current !== null) {
+      clearTimeout(pauseTimeoutRef.current);
+      pauseTimeoutRef.current = null;
+    }
+  }, []);
+  useEffect(() => {
+    var _a;
+    if (!enabled || prefersReducedMotion() || text.length === 0) {
+      setCharIndex(text.length);
+      setIsComplete(true);
+      (_a = onCompleteRef.current) == null ? void 0 : _a.call(onCompleteRef);
+      return;
+    }
+    setCharIndex(0);
+    setIsComplete(false);
+    intervalRef.current = setInterval(() => {
+      setCharIndex((prev) => {
+        const next = prev + 1;
+        if (next >= text.length) {
+          if (intervalRef.current !== null) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+          }
+          pauseTimeoutRef.current = setTimeout(() => {
+            var _a2;
+            setIsComplete(true);
+            (_a2 = onCompleteRef.current) == null ? void 0 : _a2.call(onCompleteRef);
+          }, pauseAfter);
+          return text.length;
+        }
+        return next;
+      });
+    }, speed);
+    return cleanup;
+  }, [text, speed, enabled, pauseAfter, cleanup]);
+  return {
+    displayedText: text.slice(0, charIndex),
+    isTyping: charIndex < text.length && !isComplete,
+    isComplete
+  };
+}
+var Cursor = React.memo(function Cursor2({
+  cursorChar = "|",
+  className
+}) {
+  const classes = ["ns-cursor", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { className: classes, "aria-hidden": "true", children: cursorChar });
+});
+var Prose = React.memo(function Prose2({
+  text,
+  animate = true,
+  speed = 38,
+  cursor = true,
+  cursorChar = "|",
+  pauseAfter = 100,
+  onComplete,
+  className
+}) {
+  const { displayedText, isTyping, isComplete } = useTypewriter({
+    text,
+    speed,
+    enabled: animate,
+    pauseAfter,
+    onComplete
+  });
+  const classes = [
+    "ns-prose",
+    isTyping ? "ns-prose--typing" : void 0,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("span", { className: classes, children: [
+    displayedText,
+    cursor && isTyping && /* @__PURE__ */ jsx(Cursor, { cursorChar })
+  ] });
+});
+var EnterButton = React.memo(function EnterButton2({
+  onConfirm,
+  label = "\u21B5",
+  className
+}) {
+  const classes = ["ns-enter-btn", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      onClick: onConfirm,
+      "aria-label": "Confirm",
+      children: label
+    }
+  );
+});
+var InlineInput = function InlineInput2({
+  fieldKey,
+  type = "text",
+  placeholder,
+  defaultValue = "",
+  suffix,
+  sanitise,
+  onConfirm,
+  onChange,
+  onFocus,
+  onBlur,
+  onEscape,
+  inputClassName,
+  className
+}) {
+  const [value, setValue] = useState(defaultValue);
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  const applyValue = useCallback(
+    (raw) => {
+      const cleaned = sanitise ? sanitise(raw) : raw;
+      setValue(cleaned);
+      onChange == null ? void 0 : onChange(cleaned);
+    },
+    [sanitise, onChange]
+  );
+  const handleChange = (e) => {
+    applyValue(e.target.value);
+  };
+  const handlePaste = useCallback(
+    (e) => {
+      if (!sanitise) return;
+      e.preventDefault();
+      const pasted = e.clipboardData.getData("text");
+      applyValue(pasted);
+    },
+    [sanitise, applyValue]
+  );
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      onConfirm(value);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      onEscape == null ? void 0 : onEscape();
+    }
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+    onFocus == null ? void 0 : onFocus();
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+    onBlur == null ? void 0 : onBlur(value);
+  };
+  const handleConfirmClick = () => {
+    onConfirm(value);
+  };
+  const wrapClasses = ["ns-input-wrap", className].filter(Boolean).join(" ");
+  const inputClasses = [
+    "ns-input",
+    `ns-input--${type}`,
+    isFocused ? "ns-input--focused" : void 0,
+    inputClassName
+  ].filter(Boolean).join(" ");
+  const inputMode = (() => {
+    switch (type) {
+      case "tel":
+        return "tel";
+      case "email":
+        return "email";
+      case "number":
+        return "numeric";
+      default:
+        return void 0;
+    }
+  })();
+  return /* @__PURE__ */ jsxs("span", { className: wrapClasses, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        id: `ns-field-${fieldKey}`,
+        className: inputClasses,
+        type: type === "number" ? "text" : type,
+        inputMode,
+        value,
+        placeholder,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onPaste: handlePaste,
+        autoComplete: "off",
+        "aria-label": fieldKey,
+        "aria-invalid": void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(EnterButton, { onConfirm: handleConfirmClick }),
+    suffix && /* @__PURE__ */ jsx("span", { className: "ns-suffix", children: suffix })
+  ] });
+};
+var EditIcon = React.memo(function EditIcon2({
+  onEdit,
+  label = "Edit",
+  className
+}) {
+  const classes = ["ns-edit-btn", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      onClick: onEdit,
+      "aria-label": label,
+      title: label,
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          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.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }),
+            /* @__PURE__ */ jsx("path", { d: "m15 5 4 4" })
+          ]
+        }
+      )
+    }
+  );
+});
+var FilledValue = React.memo(function FilledValue2({
+  value,
+  suffix,
+  editable = true,
+  onEdit,
+  editLabel = "Edit",
+  className
+}) {
+  const classes = ["ns-filled-wrap", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("span", { className: classes, children: [
+    /* @__PURE__ */ jsx("span", { className: "ns-filled-value", children: value }),
+    suffix && /* @__PURE__ */ jsx("span", { className: "ns-suffix", children: suffix }),
+    editable && onEdit && /* @__PURE__ */ jsx(EditIcon, { onEdit, label: editLabel })
+  ] });
+});
+var ErrorMessage = React.memo(function ErrorMessage2({
+  message,
+  display = {},
+  className
+}) {
+  var _a, _b, _c, _d, _e;
+  const mode = (_a = display.mode) != null ? _a : "inline";
+  if (mode === "toast" || mode === "shake") {
+    return null;
+  }
+  const position = (_b = display.position) != null ? _b : "below";
+  const animateIn = (_c = display.animateIn) != null ? _c : "fadeUp";
+  const showIcon = (_d = display.icon) != null ? _d : false;
+  const iconChar = (_e = display.iconChar) != null ? _e : "\u26A0";
+  const isTooltip = mode === "tooltip";
+  const isInlineShake = mode === "inline+shake";
+  const wrapClasses = [
+    "ns-error-wrap",
+    isTooltip ? "ns-error-wrap--tooltip" : "ns-error-wrap--inline",
+    `ns-error-wrap--${position}`,
+    animateIn === "fadeUp" ? "ns-animate-fade-up" : void 0,
+    animateIn === "slideDown" ? "ns-animate-slide-down" : void 0,
+    className
+  ].filter(Boolean).join(" ");
+  const textClasses = [
+    "ns-error-text",
+    isInlineShake ? "ns-error-text--shake" : void 0
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: wrapClasses, role: "alert", "aria-live": "assertive", children: /* @__PURE__ */ jsxs("span", { className: textClasses, children: [
+    showIcon && /* @__PURE__ */ jsxs("span", { className: "ns-error-icon", "aria-hidden": "true", children: [
+      iconChar,
+      " "
+    ] }),
+    message
+  ] }) });
+});
+var ChipsField = function ChipsField2({
+  fieldKey,
+  options,
+  defaultValue,
+  autoAdvance = false,
+  onConfirm,
+  onChange,
+  className
+}) {
+  const [selected, setSelected] = useState(defaultValue != null ? defaultValue : null);
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const chipsRef = useRef([]);
+  const handleSelect = useCallback(
+    (option) => {
+      setSelected(option);
+      onChange == null ? void 0 : onChange(option);
+      if (autoAdvance) {
+        onConfirm(option);
+      }
+    },
+    [autoAdvance, onConfirm, onChange]
+  );
+  const handleConfirm = useCallback(() => {
+    if (selected !== null) {
+      onConfirm(selected);
+    }
+  }, [selected, onConfirm]);
+  const handleKeyDown = useCallback(
+    (e, index) => {
+      var _a, _b;
+      switch (e.key) {
+        case "Enter":
+        case " ": {
+          e.preventDefault();
+          const option = options[index];
+          if (option) handleSelect(option);
+          break;
+        }
+        case "ArrowRight":
+        case "ArrowDown": {
+          e.preventDefault();
+          const nextIndex = (index + 1) % options.length;
+          setFocusedIndex(nextIndex);
+          (_a = chipsRef.current[nextIndex]) == null ? void 0 : _a.focus();
+          break;
+        }
+        case "ArrowLeft":
+        case "ArrowUp": {
+          e.preventDefault();
+          const prevIndex = (index - 1 + options.length) % options.length;
+          setFocusedIndex(prevIndex);
+          (_b = chipsRef.current[prevIndex]) == null ? void 0 : _b.focus();
+          break;
+        }
+      }
+    },
+    [handleSelect, options]
+  );
+  const wrapClasses = ["ns-chips-wrap", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("span", { className: wrapClasses, role: "listbox", "aria-label": fieldKey, children: [
+    options.map((option, index) => {
+      const chipClasses = [
+        "ns-chip",
+        selected === option ? "ns-chip--active" : void 0
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: (el) => {
+            chipsRef.current[index] = el;
+          },
+          type: "button",
+          className: chipClasses,
+          onClick: () => handleSelect(option),
+          onKeyDown: (e) => handleKeyDown(e, index),
+          "aria-selected": selected === option,
+          role: "option",
+          tabIndex: index === focusedIndex ? 0 : -1,
+          children: option
+        },
+        option
+      );
+    }),
+    !autoAdvance && selected !== null && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "ns-enter-btn",
+        onClick: handleConfirm,
+        "aria-label": "Confirm",
+        style: { opacity: 1, transform: "none" },
+        children: "\u21B5"
+      }
+    )
+  ] });
+};
+var MultiChipsField = function MultiChipsField2({
+  fieldKey,
+  options,
+  defaultValue,
+  onConfirm,
+  onChange,
+  className
+}) {
+  const [selected, setSelected] = useState(
+    new Set(defaultValue != null ? defaultValue : [])
+  );
+  const [hoveredIndex, setHoveredIndex] = useState(null);
+  const handleToggle = useCallback(
+    (option) => {
+      setSelected((prev) => {
+        const next = new Set(prev);
+        if (next.has(option)) {
+          next.delete(option);
+        } else {
+          next.add(option);
+        }
+        const value = Array.from(next).join(", ");
+        onChange == null ? void 0 : onChange(value);
+        return next;
+      });
+    },
+    [onChange]
+  );
+  const handleConfirm = useCallback(() => {
+    if (selected.size > 0) {
+      onConfirm(Array.from(selected).join(", "));
+    }
+  }, [selected, onConfirm]);
+  const handleKeyDown = useCallback(
+    (e, option) => {
+      if (e.key === "Enter" && selected.size > 0) {
+        e.preventDefault();
+        handleConfirm();
+      } else if (e.key === " ") {
+        e.preventDefault();
+        handleToggle(option);
+      }
+    },
+    [handleToggle, handleConfirm, selected.size]
+  );
+  const wrapClasses = ["ns-chips-wrap", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("span", { className: wrapClasses, children: [
+    options.map((option, index) => {
+      const isSelected = selected.has(option);
+      const chipClasses = [
+        "ns-chip",
+        isSelected ? "ns-chip--active" : void 0,
+        hoveredIndex === index ? "ns-chip--hover" : void 0
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: chipClasses,
+          onClick: () => handleToggle(option),
+          onKeyDown: (e) => handleKeyDown(e, option),
+          onMouseEnter: () => setHoveredIndex(index),
+          onMouseLeave: () => setHoveredIndex(null),
+          "aria-pressed": isSelected,
+          role: "option",
+          children: option
+        },
+        option
+      );
+    }),
+    selected.size > 0 && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "ns-enter-btn",
+        onClick: handleConfirm,
+        "aria-label": "Confirm",
+        children: "\u21B5"
+      }
+    )
+  ] });
+};
+var SelectField = function SelectField2({
+  fieldKey,
+  options,
+  placeholder = "Select\u2026",
+  defaultValue = "",
+  autoAdvance = false,
+  onConfirm,
+  onChange,
+  onFocus,
+  onBlur,
+  inputClassName,
+  className
+}) {
+  const [value, setValue] = useState(defaultValue);
+  const selectRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    (_a = selectRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  const handleChange = useCallback(
+    (e) => {
+      const newValue = e.target.value;
+      setValue(newValue);
+      onChange == null ? void 0 : onChange(newValue);
+      if (autoAdvance && newValue !== "") {
+        onConfirm(newValue);
+      }
+    },
+    [autoAdvance, onConfirm, onChange]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" && value !== "") {
+        e.preventDefault();
+        onConfirm(value);
+      }
+    },
+    [value, onConfirm]
+  );
+  const handleConfirmClick = useCallback(() => {
+    if (value !== "") {
+      onConfirm(value);
+    }
+  }, [value, onConfirm]);
+  const wrapClasses = ["ns-select-wrap", className].filter(Boolean).join(" ");
+  const selectClasses = ["ns-select", inputClassName].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("span", { className: wrapClasses, children: [
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        ref: selectRef,
+        id: `ns-field-${fieldKey}`,
+        className: selectClasses,
+        value,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        onFocus: () => onFocus == null ? void 0 : onFocus(),
+        onBlur: () => onBlur == null ? void 0 : onBlur(value),
+        "aria-label": fieldKey,
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+          options.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option }, option))
+        ]
+      }
+    ),
+    !autoAdvance && value !== "" && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "ns-enter-btn",
+        onClick: handleConfirmClick,
+        "aria-label": "Confirm",
+        children: "\u21B5"
+      }
+    )
+  ] });
+};
+var OtpField = function OtpField2({
+  fieldKey,
+  otpLength = 6,
+  autoAdvance = true,
+  onRequest,
+  onVerify,
+  onConfirm,
+  onChange,
+  resendLabel = "Resend code",
+  resendDelay = 30,
+  className
+}) {
+  const [digits, setDigits] = useState(Array.from({ length: otpLength }, () => ""));
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [timer, setTimer] = useState(resendDelay);
+  const [canResend, setCanResend] = useState(false);
+  const inputRefs = useRef([]);
+  const timerRef = useRef(null);
+  const hasRequestedRef = useRef(false);
+  useEffect(() => {
+    if (!hasRequestedRef.current) {
+      hasRequestedRef.current = true;
+      onRequest == null ? void 0 : onRequest();
+    }
+  }, [onRequest]);
+  useEffect(() => {
+    if (resendDelay <= 0) {
+      setCanResend(true);
+      return;
+    }
+    setTimer(resendDelay);
+    setCanResend(false);
+    timerRef.current = setInterval(() => {
+      setTimer((prev) => {
+        if (prev <= 1) {
+          if (timerRef.current !== null) {
+            clearInterval(timerRef.current);
+            timerRef.current = null;
+          }
+          setCanResend(true);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => {
+      if (timerRef.current !== null) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [resendDelay]);
+  useEffect(() => {
+    var _a;
+    (_a = inputRefs.current[0]) == null ? void 0 : _a.focus();
+  }, []);
+  const getOtpString = useCallback(
+    (d) => d.join(""),
+    []
+  );
+  const handleDigitChange = useCallback(
+    (index, value) => {
+      const digit = value.replace(/\D/g, "").slice(-1);
+      setDigits((prev) => {
+        var _a;
+        const next = [...prev];
+        next[index] = digit;
+        const otpString = getOtpString(next);
+        onChange == null ? void 0 : onChange(otpString);
+        if (digit !== "" && index < otpLength - 1) {
+          (_a = inputRefs.current[index + 1]) == null ? void 0 : _a.focus();
+          setActiveIndex(index + 1);
+        }
+        if (next.every((d) => d !== "")) {
+          onVerify == null ? void 0 : onVerify(otpString);
+          if (autoAdvance) {
+            setTimeout(() => onConfirm(otpString), 0);
+          }
+        }
+        return next;
+      });
+    },
+    [otpLength, autoAdvance, onConfirm, onVerify, onChange, getOtpString]
+  );
+  const handleKeyDown = useCallback(
+    (index, e) => {
+      var _a, _b;
+      if (e.key === "Backspace") {
+        e.preventDefault();
+        setDigits((prev) => {
+          var _a2;
+          const next = [...prev];
+          if (next[index] !== "") {
+            next[index] = "";
+            onChange == null ? void 0 : onChange(getOtpString(next));
+          } else if (index > 0) {
+            next[index - 1] = "";
+            (_a2 = inputRefs.current[index - 1]) == null ? void 0 : _a2.focus();
+            setActiveIndex(index - 1);
+            onChange == null ? void 0 : onChange(getOtpString(next));
+          }
+          return next;
+        });
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const otpString = getOtpString(digits);
+        if (digits.every((d) => d !== "")) {
+          onConfirm(otpString);
+        }
+      } else if (e.key === "ArrowLeft" && index > 0) {
+        e.preventDefault();
+        (_a = inputRefs.current[index - 1]) == null ? void 0 : _a.focus();
+        setActiveIndex(index - 1);
+      } else if (e.key === "ArrowRight" && index < otpLength - 1) {
+        e.preventDefault();
+        (_b = inputRefs.current[index + 1]) == null ? void 0 : _b.focus();
+        setActiveIndex(index + 1);
+      }
+    },
+    [digits, otpLength, onConfirm, onChange, getOtpString]
+  );
+  const handlePaste = useCallback(
+    (e) => {
+      e.preventDefault();
+      const pastedData = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, otpLength);
+      if (pastedData.length === 0) return;
+      setDigits((prev) => {
+        var _a;
+        const next = [...prev];
+        for (let i = 0; i < pastedData.length; i++) {
+          const char = pastedData[i];
+          if (char !== void 0) {
+            next[i] = char;
+          }
+        }
+        const otpString = getOtpString(next);
+        onChange == null ? void 0 : onChange(otpString);
+        const nextEmptyIndex = next.findIndex((d) => d === "");
+        const focusIndex = nextEmptyIndex === -1 ? otpLength - 1 : nextEmptyIndex;
+        (_a = inputRefs.current[focusIndex]) == null ? void 0 : _a.focus();
+        setActiveIndex(focusIndex);
+        if (next.every((d) => d !== "")) {
+          onVerify == null ? void 0 : onVerify(otpString);
+          if (autoAdvance) {
+            setTimeout(() => onConfirm(otpString), 0);
+          }
+        }
+        return next;
+      });
+    },
+    [otpLength, autoAdvance, onConfirm, onVerify, onChange, getOtpString]
+  );
+  const handleResend = useCallback(() => {
+    var _a;
+    if (!canResend) return;
+    setCanResend(false);
+    setTimer(resendDelay);
+    setDigits(Array.from({ length: otpLength }, () => ""));
+    setActiveIndex(0);
+    (_a = inputRefs.current[0]) == null ? void 0 : _a.focus();
+    onRequest == null ? void 0 : onRequest();
+    timerRef.current = setInterval(() => {
+      setTimer((prev) => {
+        if (prev <= 1) {
+          if (timerRef.current !== null) {
+            clearInterval(timerRef.current);
+            timerRef.current = null;
+          }
+          setCanResend(true);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+  }, [canResend, resendDelay, otpLength, onRequest]);
+  const handleFocus = useCallback((index) => {
+    setActiveIndex(index);
+  }, []);
+  const wrapClasses = ["ns-otp-wrap", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("span", { className: wrapClasses, children: [
+    /* @__PURE__ */ jsx("span", { className: "ns-otp-boxes", children: digits.map((digit, index) => {
+      const boxClasses = [
+        "ns-otp-box",
+        digit !== "" ? "ns-otp-box--filled" : void 0,
+        activeIndex === index ? "ns-otp-box--active" : void 0
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: (el) => {
+            inputRefs.current[index] = el;
+          },
+          className: boxClasses,
+          type: "text",
+          inputMode: "numeric",
+          maxLength: 1,
+          value: digit,
+          onChange: (e) => handleDigitChange(index, e.target.value),
+          onKeyDown: (e) => handleKeyDown(index, e),
+          onPaste: handlePaste,
+          onFocus: () => handleFocus(index),
+          autoComplete: "one-time-code",
+          "aria-label": `Digit ${String(index + 1)}`
+        },
+        index
+      );
+    }) }),
+    !autoAdvance && digits.every((d) => d !== "") && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "ns-enter-btn",
+        onClick: () => onConfirm(getOtpString(digits)),
+        "aria-label": "Confirm",
+        children: "\u21B5"
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "ns-otp-resend-wrap", children: canResend ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "ns-otp-resend",
+        onClick: handleResend,
+        children: resendLabel
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "ns-otp-resend ns-otp-resend--disabled", children: /* @__PURE__ */ jsxs("span", { className: "ns-otp-timer", children: [
+      "Resend in ",
+      String(timer),
+      "s"
+    ] }) }) })
+  ] });
+};
+var PasswordField = function PasswordField2({
+  showToggle = true,
+  inputClassName,
+  ...props
+}) {
+  const [visible, setVisible] = useState(false);
+  const toggleVisibility = () => {
+    setVisible((prev) => !prev);
+  };
+  const combinedClassName = [
+    inputClassName,
+    "ns-input--password"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("span", { className: "ns-password-wrap", children: [
+    /* @__PURE__ */ jsx(
+      InlineInput,
+      {
+        ...props,
+        type: visible ? "text" : "password",
+        inputClassName: combinedClassName
+      }
+    ),
+    showToggle && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "ns-password-toggle",
+        onClick: toggleVisibility,
+        "aria-label": visible ? "Hide password" : "Show password",
+        tabIndex: -1,
+        children: visible ? "Hide" : "Show"
+      }
+    )
+  ] });
+};
+var DateField = function DateField2({
+  fieldKey,
+  placeholder,
+  defaultValue,
+  suffix,
+  onConfirm,
+  onChange,
+  onFocus,
+  onBlur,
+  inputClassName,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    InlineInput,
+    {
+      fieldKey,
+      type: "date",
+      placeholder,
+      defaultValue,
+      suffix,
+      onConfirm,
+      onChange,
+      onFocus,
+      onBlur,
+      inputClassName,
+      className
+    }
+  );
+};
+var ToastContext = createContext(null);
+var useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+var ToastProvider = ({ children }) => {
+  const [toasts, setToasts] = useState([]);
+  const showToast = useCallback((message, icon = false, iconChar = "\u26A0") => {
+    const id = Math.random().toString(36).substring(2, 9);
+    setToasts((prev) => [...prev, { id, message, icon, iconChar }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 3e3);
+  }, []);
+  const hideToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { showToast, hideToast }, children: [
+    children,
+    toasts.length > 0 && /* @__PURE__ */ jsx("div", { className: "ns-toast-container", "aria-live": "polite", children: toasts.map((toast) => /* @__PURE__ */ jsxs("div", { className: "ns-toast ns-animate-fade-up", children: [
+      toast.icon && /* @__PURE__ */ jsxs("span", { className: "ns-toast-icon", children: [
+        toast.iconChar,
+        " "
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "ns-toast-message", children: toast.message }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ns-toast-close",
+          onClick: () => hideToast(toast.id),
+          "aria-label": "Close",
+          children: "\xD7"
+        }
+      )
+    ] }, toast.id)) })
+  ] });
+};
+function renderFieldInput({
+  field,
+  status,
+  value,
+  handleConfirm,
+  handleChange,
+  handleFocus,
+  handleBlur
+}) {
+  var _a, _b, _c, _d;
+  const editValue = status === "editing" && value !== void 0 ? String(value) : field.defaultValue;
+  switch (field.type) {
+    case "chips":
+      return /* @__PURE__ */ jsx(
+        ChipsField,
+        {
+          fieldKey: field.key,
+          options: (_a = field.options) != null ? _a : [],
+          defaultValue: editValue,
+          autoAdvance: field.autoAdvance,
+          onConfirm: handleConfirm,
+          onChange: handleChange,
+          className: field.inputClassName
+        }
+      );
+    case "multi-chips":
+      return /* @__PURE__ */ jsx(
+        MultiChipsField,
+        {
+          fieldKey: field.key,
+          options: (_b = field.options) != null ? _b : [],
+          defaultValue: status === "editing" && Array.isArray(value) ? value : editValue == null ? void 0 : editValue.split(", ").filter(Boolean),
+          onConfirm: handleConfirm,
+          onChange: handleChange,
+          className: field.inputClassName
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ jsx(
+        SelectField,
+        {
+          fieldKey: field.key,
+          options: (_c = field.options) != null ? _c : [],
+          placeholder: field.placeholder,
+          defaultValue: editValue,
+          autoAdvance: field.autoAdvance,
+          onConfirm: handleConfirm,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          inputClassName: field.inputClassName
+        }
+      );
+    case "otp":
+      return /* @__PURE__ */ jsx(
+        OtpField,
+        {
+          fieldKey: field.key,
+          otpLength: field.otpLength,
+          autoAdvance: (_d = field.autoAdvance) != null ? _d : true,
+          onRequest: field.onRequest,
+          onVerify: field.onVerify,
+          onConfirm: handleConfirm,
+          onChange: handleChange,
+          resendLabel: field.resendLabel,
+          resendDelay: field.resendDelay,
+          className: field.inputClassName
+        }
+      );
+    case "password":
+      return /* @__PURE__ */ jsx(
+        PasswordField,
+        {
+          fieldKey: field.key,
+          placeholder: field.placeholder,
+          defaultValue: editValue,
+          suffix: field.suffix,
+          onConfirm: handleConfirm,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          inputClassName: field.inputClassName
+        }
+      );
+    case "date":
+      return /* @__PURE__ */ jsx(
+        DateField,
+        {
+          fieldKey: field.key,
+          placeholder: field.placeholder,
+          defaultValue: editValue,
+          suffix: field.suffix,
+          onConfirm: handleConfirm,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          inputClassName: field.inputClassName
+        }
+      );
+    // text, tel, email, number — all use InlineInput with the appropriate type
+    default:
+      return /* @__PURE__ */ jsx(
+        InlineInput,
+        {
+          fieldKey: field.key,
+          type: field.type,
+          placeholder: field.placeholder,
+          defaultValue: editValue,
+          suffix: field.suffix,
+          sanitise: field.sanitise,
+          onConfirm: handleConfirm,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          inputClassName: field.inputClassName
+        }
+      );
+  }
+}
+var Line = React.memo(function Line2({
+  field,
+  status,
+  value,
+  allValues = {},
+  typewriter,
+  editable = true,
+  locked = false,
+  editLabel = "Edit",
+  onTypingComplete,
+  onConfirm,
+  onEdit,
+  onError,
+  onChange,
+  onFocus,
+  onBlur
+}) {
+  var _a, _b, _c, _d, _e;
+  const [error, setError] = useState(null);
+  const [shake, setShake] = useState(false);
+  const [asyncState, setAsyncState] = useState("idle");
+  const abortRef = useRef(null);
+  const { showToast } = useToast();
+  const isFieldEditable = field.editable !== false && editable && !locked;
+  const shouldAnimate = field.animate !== false && (typewriter == null ? void 0 : typewriter.enabled) !== false;
+  const handleTypingComplete = useCallback(() => {
+    onTypingComplete(field.key);
+  }, [field.key, onTypingComplete]);
+  const handleConfirm = useCallback(
+    (val) => {
+      var _a2, _b2, _c2, _d2;
+      (_a2 = abortRef.current) == null ? void 0 : _a2.call(abortRef);
+      abortRef.current = null;
+      const result = validateField(val, field.validation, allValues);
+      if (!result.valid) {
+        const firstError = (_b2 = result.errors[0]) != null ? _b2 : "Validation failed";
+        setError(firstError);
+        setAsyncState("idle");
+        onError == null ? void 0 : onError(field.key, firstError);
+        const display = (_c2 = field.validation) == null ? void 0 : _c2.errorDisplay;
+        const mode = (_d2 = display == null ? void 0 : display.mode) != null ? _d2 : "inline";
+        if (mode === "shake" || mode === "inline+shake") {
+          setShake(false);
+          setTimeout(() => setShake(true), 10);
+        }
+        if (mode === "toast") {
+          showToast(firstError, display == null ? void 0 : display.icon, display == null ? void 0 : display.iconChar);
+        }
+        return;
+      }
+      if (hasAsyncValidation(field.validation)) {
+        setAsyncState("validating");
+        setError(null);
+        const handle = validateFieldAsync(val, field.validation, allValues);
+        abortRef.current = handle.abort;
+        handle.promise.then((asyncResult) => {
+          var _a3;
+          if (!asyncResult.valid) {
+            const firstError = (_a3 = asyncResult.errors[0]) != null ? _a3 : "Validation failed";
+            setError(firstError);
+            setAsyncState("invalid");
+            onError == null ? void 0 : onError(field.key, firstError);
+          } else {
+            setAsyncState("valid");
+            setError(null);
+            setTimeout(() => {
+              setAsyncState("idle");
+              onConfirm(field.key, val);
+            }, 300);
+          }
+        }).catch(() => {
+          setAsyncState("idle");
+        });
+        return;
+      }
+      setError(null);
+      setShake(false);
+      setAsyncState("idle");
+      onConfirm(field.key, val);
+    },
+    [field.key, field.validation, allValues, onConfirm, onError, showToast]
+  );
+  const handleEdit = useCallback(() => {
+    var _a2;
+    setError(null);
+    setShake(false);
+    setAsyncState("idle");
+    (_a2 = abortRef.current) == null ? void 0 : _a2.call(abortRef);
+    onEdit(field.key);
+  }, [field.key, onEdit]);
+  const handleChange = useCallback(
+    (val) => {
+      var _a2, _b2, _c2;
+      const clearOn = (_c2 = (_b2 = (_a2 = field.validation) == null ? void 0 : _a2.errorDisplay) == null ? void 0 : _b2.clearOn) != null ? _c2 : "onChange";
+      if (clearOn === "onChange" && error !== null) {
+        setError(null);
+        setShake(false);
+        setAsyncState("idle");
+      }
+      onChange == null ? void 0 : onChange(field.key, val);
+    },
+    [field.key, onChange, error, (_b = (_a = field.validation) == null ? void 0 : _a.errorDisplay) == null ? void 0 : _b.clearOn]
+  );
+  const handleFocus = useCallback(() => {
+    var _a2, _b2, _c2;
+    const clearOn = (_c2 = (_b2 = (_a2 = field.validation) == null ? void 0 : _a2.errorDisplay) == null ? void 0 : _b2.clearOn) != null ? _c2 : "onChange";
+    if (clearOn === "onFocus" && error !== null) {
+      setError(null);
+      setShake(false);
+      setAsyncState("idle");
+    }
+    onFocus == null ? void 0 : onFocus(field.key);
+  }, [field.key, onFocus, error, (_d = (_c = field.validation) == null ? void 0 : _c.errorDisplay) == null ? void 0 : _d.clearOn]);
+  const handleBlur = useCallback(
+    (val) => {
+      onBlur == null ? void 0 : onBlur(field.key, val);
+    },
+    [field.key, onBlur]
+  );
+  const lineClasses = [
+    "ns-line",
+    `ns-line-${field.key}`,
+    status === "active" || status === "editing" ? "ns-line--active" : void 0,
+    status === "confirmed" ? "ns-line--confirmed" : void 0,
+    status === "editing" ? "ns-line--editing" : void 0,
+    error !== null ? "ns-line--error" : void 0,
+    shake ? "ns-line--shake" : void 0,
+    field.className
+  ].filter(Boolean).join(" ");
+  const showInput = status === "active" || status === "editing";
+  const showFilled = status === "confirmed";
+  return /* @__PURE__ */ jsxs("div", { className: lineClasses, role: "group", "aria-label": field.prefix, children: [
+    /* @__PURE__ */ jsx(
+      Prose,
+      {
+        text: field.prefix,
+        animate: status === "typing" && shouldAnimate,
+        speed: typewriter == null ? void 0 : typewriter.speed,
+        cursor: typewriter == null ? void 0 : typewriter.cursor,
+        cursorChar: typewriter == null ? void 0 : typewriter.cursorChar,
+        pauseAfter: typewriter == null ? void 0 : typewriter.pauseAfter,
+        onComplete: status === "typing" ? handleTypingComplete : void 0
+      }
+    ),
+    showInput && renderFieldInput({
+      field,
+      status,
+      value,
+      handleConfirm,
+      handleChange,
+      handleFocus,
+      handleBlur
+    }),
+    showInput && asyncState === "validating" && /* @__PURE__ */ jsx("span", { className: "ns-loading-indicator", "aria-label": "Validating" }),
+    showInput && asyncState === "valid" && /* @__PURE__ */ jsx("span", { className: "ns-success-indicator", "aria-label": "Valid", children: "\u2713" }),
+    showFilled && /* @__PURE__ */ jsx(
+      FilledValue,
+      {
+        value: String(value != null ? value : ""),
+        suffix: field.suffix,
+        editable: isFieldEditable,
+        onEdit: handleEdit,
+        editLabel
+      }
+    ),
+    error !== null && showInput && /* @__PURE__ */ jsx(
+      ErrorMessage,
+      {
+        message: error,
+        display: (_e = field.validation) == null ? void 0 : _e.errorDisplay
+      }
+    )
+  ] });
+});
+var ThemeContext = createContext({
+  theme: {},
+  isDark: false
+});
+function useTheme() {
+  return useContext(ThemeContext);
+}
+var TOKEN_TO_CSS_VAR = {
+  background: "--ns-bg",
+  textColor: "--ns-text",
+  inputBorderColor: "--ns-border",
+  placeholderColor: "--ns-placeholder-color",
+  errorColor: "--ns-error",
+  filledColor: "--ns-filled-color",
+  cursorColor: "--ns-cursor-color",
+  successColor: "--ns-success-color",
+  loadingColor: "--ns-loading-color",
+  fontFamily: "--ns-font-family",
+  uiFontFamily: "--ns-ui-font",
+  fontSize: "--ns-font-size",
+  mobileFontSize: "--ns-mobile-font-size",
+  inputFontStyle: "--ns-input-font-style",
+  lineGap: "--ns-line-gap",
+  pagePadding: "--ns-page-padding",
+  buttonRadius: "--ns-btn-radius",
+  buttonBackground: "--ns-btn-bg",
+  buttonColor: "--ns-btn-color",
+  enterBtnSize: "--ns-enter-size",
+  chipBorderRadius: "--ns-chip-radius",
+  chipBorderColor: "--ns-chip-border",
+  chipActiveBackground: "--ns-chip-active-bg",
+  chipActiveColor: "--ns-chip-active-color",
+  chipFontStyle: "--ns-chip-font-style"
+};
+function themeToCssVars(theme) {
+  const style = {};
+  for (const [tokenName, cssVar] of Object.entries(TOKEN_TO_CSS_VAR)) {
+    const value = theme[tokenName];
+    if (typeof value === "string" && value.length > 0) {
+      style[cssVar] = value;
+    }
+  }
+  return style;
+}
+function usePrefersDark() {
+  const [prefersDark, setPrefersDark] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e) => {
+      setPrefersDark(e.matches);
+    };
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+  return prefersDark;
+}
+var ThemeProvider = function ThemeProvider2({
+  theme = {},
+  children
+}) {
+  const systemPrefersDark = usePrefersDark();
+  const isDark = useMemo(() => {
+    if (theme.mode === "dark") return true;
+    if (theme.mode === "auto") return systemPrefersDark;
+    return false;
+  }, [theme.mode, systemPrefersDark]);
+  const resolvedTheme = useMemo(() => {
+    if (isDark && theme.dark) {
+      return { ...theme, ...theme.dark };
+    }
+    return theme;
+  }, [theme, isDark]);
+  const cssVars = useMemo(() => themeToCssVars(resolvedTheme), [resolvedTheme]);
+  const contextValue = useMemo(
+    () => ({ theme: resolvedTheme, isDark }),
+    [resolvedTheme, isDark]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { style: cssVars, className: isDark ? "ns-root--dark" : void 0, children }) });
+};
+var WelcomeScreen = React.memo(
+  function WelcomeScreen2({ welcome, typewriter, onStart, className }) {
+    var _a, _b;
+    const heading = (_a = welcome.heading) != null ? _a : "Welcome";
+    const subtext = welcome.subtext;
+    const ctaLabel = (_b = welcome.ctaLabel) != null ? _b : "Let\u2019s go \u2192";
+    const shouldAnimate = (typewriter == null ? void 0 : typewriter.enabled) !== false;
+    const handleClick = useCallback(() => {
+      onStart();
+    }, [onStart]);
+    const wrapperClasses = ["ns-welcome", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+      /* @__PURE__ */ jsx("h1", { className: "ns-welcome-heading", children: /* @__PURE__ */ jsx(
+        Prose,
+        {
+          text: heading,
+          animate: shouldAnimate,
+          speed: typewriter == null ? void 0 : typewriter.speed,
+          cursor: typewriter == null ? void 0 : typewriter.cursor,
+          cursorChar: typewriter == null ? void 0 : typewriter.cursorChar
+        }
+      ) }),
+      subtext && /* @__PURE__ */ jsx("p", { className: "ns-welcome-subtext", children: subtext }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ns-welcome-cta",
+          onClick: handleClick,
+          children: ctaLabel
+        }
+      )
+    ] });
+  }
+);
+function interpolateMessage(template, values) {
+  return template.replace(/\{(\w+)\}/g, (_match, key) => {
+    const val = values[key];
+    if (Array.isArray(val)) return val.join(", ");
+    return typeof val === "string" ? val : `{${key}}`;
+  });
+}
+var DoneScreen = React.memo(
+  function DoneScreen2({ done, values, meta, typewriter, className }) {
+    var _a;
+    const [submitState, setSubmitState] = useState("default");
+    const [errorMessage, setErrorMessage] = useState(null);
+    const ctaLabel = (_a = done.ctaLabel) != null ? _a : "Continue \u2192";
+    const shouldAnimate = (typewriter == null ? void 0 : typewriter.enabled) !== false;
+    const resolvedMessage = (() => {
+      if (typeof done.message === "function") {
+        return done.message(values);
+      }
+      if (typeof done.message === "string") {
+        return interpolateMessage(done.message, values);
+      }
+      return "You\u2019re all set!";
+    })();
+    const handleSubmit = useCallback(async () => {
+      if (!done.onSubmit || submitState === "loading" || submitState === "success") {
+        return;
+      }
+      setSubmitState("loading");
+      setErrorMessage(null);
+      try {
+        await done.onSubmit(values, meta);
+        setSubmitState("success");
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "Something went wrong. Please try again.";
+        setErrorMessage(msg);
+        setSubmitState("error");
+      }
+    }, [done, values, meta, submitState]);
+    const wrapperClasses = ["ns-done", className].filter(Boolean).join(" ");
+    const ctaClasses = [
+      "ns-done-cta",
+      submitState === "loading" ? "ns-done-cta--loading" : void 0,
+      submitState === "success" ? "ns-done-cta--success" : void 0,
+      submitState === "error" ? "ns-done-cta--error" : void 0
+    ].filter(Boolean).join(" ");
+    const buttonLabel = (() => {
+      switch (submitState) {
+        case "loading":
+          return "Please wait\u2026";
+        case "success":
+          return "\u2713 Done";
+        case "error":
+          return "Try again";
+        default:
+          return ctaLabel;
+      }
+    })();
+    return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+      /* @__PURE__ */ jsx("div", { className: "ns-done-message", children: /* @__PURE__ */ jsx(
+        Prose,
+        {
+          text: resolvedMessage,
+          animate: shouldAnimate,
+          speed: typewriter == null ? void 0 : typewriter.speed,
+          cursor: typewriter == null ? void 0 : typewriter.cursor,
+          cursorChar: typewriter == null ? void 0 : typewriter.cursorChar
+        }
+      ) }),
+      done.onSubmit && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: ctaClasses,
+          onClick: handleSubmit,
+          disabled: submitState === "loading" || submitState === "success",
+          children: [
+            submitState === "loading" && /* @__PURE__ */ jsx("span", { className: "ns-loading-indicator", "aria-hidden": "true" }),
+            buttonLabel
+          ]
+        }
+      ),
+      errorMessage !== null && /* @__PURE__ */ jsx("p", { className: "ns-done-error", children: errorMessage })
+    ] });
+  }
+);
+var NarrativeFormInner = function NarrativeFormInner2({
+  fields: staticFields,
+  fieldsUrl,
+  fieldsUrlHeaders,
+  formConfig,
+  typewriter,
+  welcome: welcomeProp,
+  done: doneProp,
+  editable = true,
+  editLabel,
+  className,
+  callbacks,
+  formRef,
+  defaultValues,
+  values: controlledValues,
+  strings: stringsProp,
+  locale,
+  direction: directionProp,
+  crossFieldValidators,
+  loadingComponent,
+  errorComponent,
+  onFetchError,
+  retryLabel,
+  reducedMotion
+}) {
+  var _a;
+  const { isDark } = useTheme();
+  const i18n = useMemo(() => mergeStrings(stringsProp), [stringsProp]);
+  const direction = useMemo(() => {
+    var _a2;
+    if (directionProp) return directionProp;
+    if (locale) {
+      const rtlLocales = ["ar", "he", "fa", "ur"];
+      const lang = (_a2 = locale.split("-")[0]) == null ? void 0 : _a2.toLowerCase();
+      if (lang && rtlLocales.includes(lang)) return "rtl";
+    }
+    return "ltr";
+  }, [directionProp, locale]);
+  const { config: dynamicConfig, loading: dynamicLoading, error: dynamicError, retry } = useDynamicForm({ fieldsUrl, fieldsUrlHeaders, onFetchError });
+  const resolvedConfig = useMemo(() => {
+    if (staticFields) return { fields: staticFields };
+    if (formConfig) return formConfig;
+    if (dynamicConfig) return dynamicConfig;
+    return null;
+  }, [staticFields, formConfig, dynamicConfig]);
+  const fields = (_a = resolvedConfig == null ? void 0 : resolvedConfig.fields) != null ? _a : [];
+  const welcome = welcomeProp != null ? welcomeProp : resolvedConfig && "welcome" in resolvedConfig ? resolvedConfig.welcome : void 0;
+  const done = doneProp != null ? doneProp : resolvedConfig && "done" in resolvedConfig ? resolvedConfig.done : void 0;
+  const effectiveTypewriter = useMemo(() => {
+    var _a2;
+    return {
+      ...typewriter,
+      enabled: reducedMotion ? false : (_a2 = typewriter == null ? void 0 : typewriter.enabled) != null ? _a2 : true
+    };
+  }, [typewriter, reducedMotion]);
+  const {
+    snapshot,
+    startTyping,
+    activateField,
+    confirmField,
+    editField,
+    reconfirmField,
+    next,
+    focusField,
+    reset,
+    getValues,
+    getMeta
+  } = useFormState(fields);
+  const showWelcome = (welcome == null ? void 0 : welcome.show) !== false && welcome !== void 0;
+  const [welcomeDismissed, setWelcomeDismissed] = useState(!showWelcome);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const hasStartedRef = useRef(false);
+  const defaultsAppliedRef = useRef(false);
+  useEffect(() => {
+    if (defaultsAppliedRef.current || !defaultValues) return;
+    defaultsAppliedRef.current = true;
+    for (const field of fields) {
+      const val = defaultValues[field.key];
+      if (val !== void 0) {
+        startTyping(field.key);
+        activateField(field.key);
+        confirmField(field.key, val);
+      }
+    }
+  }, [defaultValues, fields, startTyping, activateField, confirmField]);
+  useEffect(() => {
+    if (!welcomeDismissed) return;
+    if (hasStartedRef.current) return;
+    if (fields.length === 0) return;
+    hasStartedRef.current = true;
+    const firstField = fields.find((f) => snapshot.statuses[f.key] !== "confirmed");
+    if (firstField) {
+      startTyping(firstField.key);
+    }
+  }, [welcomeDismissed, fields, startTyping, snapshot.statuses]);
+  useEffect(() => {
+    if (!formRef) return;
+    const handle = {
+      next,
+      getValues,
+      reset: () => {
+        setWelcomeDismissed(!showWelcome);
+        hasStartedRef.current = false;
+        defaultsAppliedRef.current = false;
+        reset();
+      },
+      focusField
+    };
+    if (typeof formRef === "function") {
+      formRef(handle);
+    } else if (formRef && "current" in formRef) {
+      formRef.current = handle;
+    }
+  }, [formRef, next, getValues, reset, focusField, showWelcome]);
+  const handleWelcomeStart = useCallback(() => {
+    setWelcomeDismissed(true);
+  }, []);
+  const handleTypingComplete = useCallback(
+    (key) => {
+      activateField(key);
+    },
+    [activateField]
+  );
+  const handleConfirm = useCallback(
+    (key, value) => {
+      var _a2, _b;
+      const status = snapshot.statuses[key];
+      const finalValue = (controlledValues == null ? void 0 : controlledValues[key]) !== void 0 ? String(controlledValues[key]) : value;
+      if (status === "editing") {
+        reconfirmField(key, finalValue);
+      } else {
+        confirmField(key, finalValue);
+      }
+      (_a2 = callbacks == null ? void 0 : callbacks.onFieldComplete) == null ? void 0 : _a2.call(callbacks, key, finalValue, 0);
+      const updatedValues = { ...snapshot.values, [key]: finalValue };
+      const visibleFieldKeys = fields.filter((f) => {
+        if (!f.showIf) return true;
+        return f.showIf(updatedValues);
+      }).map((f) => f.key);
+      const allConfirmed = visibleFieldKeys.every(
+        (k) => k === key || snapshot.statuses[k] === "confirmed"
+      );
+      if (allConfirmed) {
+        const finalValues = {};
+        for (const k of visibleFieldKeys) {
+          const v = k === key ? finalValue : snapshot.values[k];
+          if (v !== void 0) finalValues[k] = v;
+        }
+        (_b = callbacks == null ? void 0 : callbacks.onComplete) == null ? void 0 : _b.call(callbacks, finalValues, getMeta());
+      } else {
+        const currentIndex = fields.findIndex((f) => f.key === key);
+        for (let i = currentIndex + 1; i < fields.length; i++) {
+          const nextField = fields[i];
+          if (!nextField) continue;
+          if (snapshot.statuses[nextField.key] === "confirmed") continue;
+          const nextUpdatedValues = { ...snapshot.values, [key]: finalValue };
+          if (nextField.showIf && !nextField.showIf(nextUpdatedValues)) continue;
+          startTyping(nextField.key);
+          break;
+        }
+      }
+    },
+    [snapshot, fields, confirmField, reconfirmField, startTyping, callbacks, getMeta, controlledValues]
+  );
+  const handleEdit = useCallback(
+    (key) => {
+      var _a2;
+      editField(key);
+      (_a2 = callbacks == null ? void 0 : callbacks.onEdit) == null ? void 0 : _a2.call(callbacks, key);
+    },
+    [editField, callbacks]
+  );
+  const handleError = useCallback(
+    (key, message) => {
+      var _a2;
+      (_a2 = callbacks == null ? void 0 : callbacks.onError) == null ? void 0 : _a2.call(callbacks, key, message);
+    },
+    [callbacks]
+  );
+  const handleChange = useCallback(
+    (key, value) => {
+      var _a2;
+      (_a2 = callbacks == null ? void 0 : callbacks.onChange) == null ? void 0 : _a2.call(callbacks, key, value);
+    },
+    [callbacks]
+  );
+  const handleFocus = useCallback(
+    (key) => {
+      var _a2;
+      (_a2 = callbacks == null ? void 0 : callbacks.onFieldFocus) == null ? void 0 : _a2.call(callbacks, key);
+    },
+    [callbacks]
+  );
+  const handleBlur = useCallback(
+    (key, value) => {
+      var _a2;
+      (_a2 = callbacks == null ? void 0 : callbacks.onFieldBlur) == null ? void 0 : _a2.call(callbacks, key, value);
+    },
+    [callbacks]
+  );
+  useEffect(() => {
+    const onDropOff = callbacks == null ? void 0 : callbacks.onDropOff;
+    if (!onDropOff) return;
+    if (typeof window === "undefined") return;
+    const handleVisibility = () => {
+      if (document.visibilityState === "hidden" && !snapshot.isComplete) {
+        const activeField = fields.find(
+          (f) => snapshot.statuses[f.key] === "active" || snapshot.statuses[f.key] === "editing"
+        );
+        if (activeField) {
+          onDropOff(activeField.key);
+        }
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibility);
+    return () => document.removeEventListener("visibilitychange", handleVisibility);
+  }, [callbacks, snapshot, fields]);
+  const visibleFields = useMemo(() => {
+    return fields.filter((field) => {
+      const status = snapshot.statuses[field.key];
+      const isStarted = status === "typing" || status === "active" || status === "confirmed" || status === "editing";
+      if (!isStarted) return false;
+      if (field.showIf && !field.showIf(snapshot.values)) return false;
+      return true;
+    });
+  }, [fields, snapshot.statuses, snapshot.values]);
+  const lockedFields = useMemo(() => {
+    const locked = /* @__PURE__ */ new Set();
+    for (let i = 0; i < fields.length; i++) {
+      const field = fields[i];
+      if (!field) continue;
+      if (field.lockPrevious && (snapshot.statuses[field.key] === "active" || snapshot.statuses[field.key] === "typing" || snapshot.statuses[field.key] === "editing" || snapshot.statuses[field.key] === "confirmed")) {
+        for (let j = 0; j < i; j++) {
+          const prev = fields[j];
+          if (prev) locked.add(prev.key);
+        }
+      }
+    }
+    return locked;
+  }, [fields, snapshot.statuses]);
+  const showDone = (done == null ? void 0 : done.show) !== false && done !== void 0 && snapshot.isComplete;
+  if (fieldsUrl && dynamicLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "ns-root", children: loadingComponent != null ? loadingComponent : /* @__PURE__ */ jsx("div", { className: "ns-loading-indicator", "aria-label": "Loading form" }) });
+  }
+  if (fieldsUrl && dynamicError) {
+    return /* @__PURE__ */ jsx("div", { className: "ns-root", children: errorComponent != null ? errorComponent : /* @__PURE__ */ jsxs("div", { className: "ns-done", children: [
+      /* @__PURE__ */ jsx("p", { className: "ns-error-text", children: i18n.fetchErrorMessage }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ns-done-cta", onClick: retry, children: retryLabel != null ? retryLabel : i18n.retryLabel })
+    ] }) });
+  }
+  const rootClasses = [
+    "ns-root",
+    snapshot.isComplete ? "ns-root--complete" : void 0,
+    isDark ? "ns-root--dark" : void 0,
+    isSubmitting ? "ns-root--submitting" : void 0,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: rootClasses, dir: direction, lang: locale, children: [
+    !welcomeDismissed && welcome && /* @__PURE__ */ jsx(
+      WelcomeScreen,
+      {
+        welcome,
+        typewriter: effectiveTypewriter,
+        onStart: handleWelcomeStart
+      }
+    ),
+    welcomeDismissed && /* @__PURE__ */ jsx("div", { className: "ns-letter", role: "form", "aria-label": "Narrative form", children: visibleFields.map((field) => {
+      var _a2, _b;
+      return /* @__PURE__ */ jsx(
+        Line,
+        {
+          field,
+          status: (_a2 = snapshot.statuses[field.key]) != null ? _a2 : "idle",
+          value: (_b = controlledValues == null ? void 0 : controlledValues[field.key]) != null ? _b : snapshot.values[field.key],
+          allValues: snapshot.values,
+          typewriter: effectiveTypewriter,
+          editable,
+          locked: lockedFields.has(field.key),
+          editLabel: editLabel != null ? editLabel : i18n.editLabel,
+          onTypingComplete: handleTypingComplete,
+          onConfirm: handleConfirm,
+          onEdit: handleEdit,
+          onError: handleError,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur
+        },
+        field.key
+      );
+    }) }),
+    showDone && done && /* @__PURE__ */ jsx(
+      DoneScreen,
+      {
+        done,
+        values: snapshot.values,
+        meta: getMeta(),
+        typewriter: effectiveTypewriter
+      }
+    )
+  ] });
+};
+var NarrativeForm = function NarrativeForm2(props) {
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme: props.theme, children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(NarrativeFormInner, { ...props }) }) });
+};
+var TextField = function TextField2(props) {
+  return /* @__PURE__ */ jsx(InlineInput, { ...props, type: "text" });
+};
+var TelField = function TelField2(props) {
+  return /* @__PURE__ */ jsx(InlineInput, { ...props, type: "tel" });
+};
+var EmailField = function EmailField2(props) {
+  return /* @__PURE__ */ jsx(InlineInput, { ...props, type: "email" });
+};
+var NumberField = function NumberField2(props) {
+  return /* @__PURE__ */ jsx(InlineInput, { ...props, type: "number" });
+};
+
+export { ChipsField, Cursor, DoneScreen, EditIcon, EmailField, EnterButton, ErrorMessage, FilledValue, InlineInput, Line, MultiChipsField, NarrativeForm, NumberField, OtpField, PasswordField, Prose, SelectField, TelField, TextField, ThemeProvider, WelcomeScreen, useFormState, useTheme, useTypewriter };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map