@viveksinghind/narrative-form-vue 1.0.2 → 1.0.4

package/dist/index.mjs

@@ -1,67 +1,67 @@
-import { triggerRef as U, shallowRef as j, onUnmounted as N, defineComponent as _, ref as g, onMounted as H, openBlock as f, createElementBlock as y, createElementVNode as $, toDisplayString as k, createCommentVNode as F, createBlock as V, Transition as q, withCtx as z, watch as E, nextTick as O, withKeys as G, withModifiers as J, createVNode as Q, computed as x, Fragment as X, renderList as Y, unref as b } from "vue";
-import { FormStateEngine as Z, validateField as ee, hasAsyncValidation as te, validateFieldAsync as ne, mergeStrings as le } from "@viveksinghind/narrative-form-core";
-function se(n) {
-  const e = new Z(n, () => {
-    t.value = e.getSnapshot(), U(t);
-  }), t = j(e.getSnapshot());
-  return N(() => {
-    e.reset();
+import { triggerRef as X, shallowRef as Y, onUnmounted as H, defineComponent as N, ref as C, onMounted as O, openBlock as i, createElementBlock as f, createElementVNode as E, toDisplayString as S, createCommentVNode as K, createBlock as j, Transition as ee, withCtx as te, watch as q, computed as x, normalizeClass as R, createTextVNode as ne, unref as L, Fragment as P, renderList as U, createVNode as Z, mergeProps as W, resolveDynamicComponent as le, nextTick as ae, provide as J, normalizeStyle as se, renderSlot as Q } from "vue";
+import { FormStateEngine as oe, validateField as re, hasAsyncValidation as ie, validateFieldAsync as ue, mergeStrings as ce, fetchFormConfig as de } from "@viveksinghind/narrative-form-core";
+function fe(e) {
+  const s = new oe(e, () => {
+    t.value = s.getSnapshot(), X(t);
+  }), t = Y(s.getSnapshot());
+  return H(() => {
+    s.reset();
   }), {
     snapshot: t,
-    startTyping: (l) => e.startTyping(l),
-    activateField: (l) => e.activateField(l),
-    confirmField: (l, u) => e.confirmField(l, u),
-    editField: (l) => e.editField(l),
-    reconfirmField: (l, u) => e.reconfirmField(l, u),
-    next: () => e.next(),
-    focusField: (l) => e.focusField(l),
+    startTyping: (n) => s.startTyping(n),
+    activateField: (n) => s.activateField(n),
+    confirmField: (n, a) => s.confirmField(n, a),
+    editField: (n) => s.editField(n),
+    reconfirmField: (n, a) => s.reconfirmField(n, a),
+    next: () => s.next(),
+    focusField: (n) => s.focusField(n),
     reset: () => {
-      e.reset(), t.value = e.getSnapshot();
+      s.reset(), t.value = s.getSnapshot();
     },
-    getValues: () => e.getValues(),
-    getMeta: (l, u) => e.getMeta(l, u)
+    getValues: () => s.getValues(),
+    getMeta: (n, a) => s.getMeta(n, a)
   };
 }
-const ae = { class: "ns-welcome fade-in" }, ie = { class: "ns-welcome-title" }, oe = {
+const me = { class: "ns-welcome fade-in" }, ve = { class: "ns-welcome-title" }, pe = {
   key: 0,
   class: "ns-welcome-subtitle"
-}, re = /* @__PURE__ */ _({
+}, ye = /* @__PURE__ */ N({
   __name: "WelcomeScreen",
   props: {
     welcome: {},
     typewriter: {}
   },
   emits: ["start"],
-  setup(n, { emit: e }) {
-    const t = n, l = e, u = g("");
-    let p;
-    return H(() => {
+  setup(e, { emit: s }) {
+    const t = e, n = s, a = C("");
+    let o;
+    return O(() => {
       if (!t.typewriter.enabled) {
-        u.value = t.welcome.heading || "";
+        a.value = t.welcome.heading || "";
         return;
       }
-      let c = 0;
-      p = setInterval(() => {
-        u.value = (t.welcome.heading || "").slice(0, c + 1), c++, c >= (t.welcome.heading || "").length && clearInterval(p);
+      let l = 0;
+      o = setInterval(() => {
+        a.value = (t.welcome.heading || "").slice(0, l + 1), l++, l >= (t.welcome.heading || "").length && clearInterval(o);
       }, t.typewriter.speed ?? 30);
-    }), N(() => {
-      clearInterval(p);
-    }), (c, i) => (f(), y("div", ae, [
-      $("h1", ie, k(u.value), 1),
-      n.welcome.subtext ? (f(), y("p", oe, k(n.welcome.subtext), 1)) : F("", !0),
-      $("button", {
+    }), H(() => {
+      clearInterval(o);
+    }), (l, r) => (i(), f("div", me, [
+      E("h1", ve, S(a.value), 1),
+      e.welcome.subtext ? (i(), f("p", pe, S(e.welcome.subtext), 1)) : K("", !0),
+      E("button", {
         type: "button",
         class: "ns-welcome-start",
-        onClick: i[0] || (i[0] = (h) => l("start"))
-      }, k(n.welcome.ctaLabel || "Start"), 1)
+        onClick: r[0] || (r[0] = (y) => n("start"))
+      }, S(e.welcome.ctaLabel || "Start"), 1)
     ]));
   }
-}), L = (n, e) => {
-  const t = n.__vccOpts || n;
-  for (const [l, u] of e)
-    t[l] = u;
+}), G = (e, s) => {
+  const t = e.__vccOpts || e;
+  for (const [n, a] of s)
+    t[n] = a;
   return t;
-}, ue = /* @__PURE__ */ L(re, [["__scopeId", "data-v-dbeb46ea"]]), de = { class: "ns-done fade-in" }, ce = { class: "ns-done-title" }, ve = /* @__PURE__ */ _({
+}, ge = /* @__PURE__ */ G(ye, [["__scopeId", "data-v-dbeb46ea"]]), he = { class: "ns-done fade-in" }, be = { class: "ns-done-title" }, Ce = /* @__PURE__ */ N({
   __name: "DoneScreen",
   props: {
     done: {},
@@ -69,37 +69,699 @@ const ae = { class: "ns-welcome fade-in" }, ie = { class: "ns-welcome-title" },
     meta: {},
     typewriter: {}
   },
-  setup(n) {
-    return (e, t) => (f(), y("div", de, [
-      $("h1", ce, k(typeof n.done.message == "function" ? n.done.message(n.values) : n.done.message), 1)
+  setup(e) {
+    return (s, t) => (i(), f("div", he, [
+      E("h1", be, S(typeof e.done.message == "function" ? e.done.message(e.values) : e.done.message), 1)
     ]));
   }
-}), fe = /* @__PURE__ */ L(ve, [["__scopeId", "data-v-7802c8f5"]]), me = {
+}), ke = /* @__PURE__ */ G(Ce, [["__scopeId", "data-v-7802c8f5"]]), we = {
   key: 0,
   class: "ns-error-wrapper"
-}, pe = { class: "ns-error-text" }, ye = /* @__PURE__ */ _({
+}, Fe = { class: "ns-error-text" }, xe = /* @__PURE__ */ N({
   __name: "ErrorMessage",
   props: {
     message: {},
     config: {}
   },
-  setup(n) {
-    return (e, t) => (f(), V(q, { name: "fade-slide" }, {
-      default: z(() => [
-        n.message ? (f(), y("div", me, [
-          $("p", pe, k(n.message), 1)
-        ])) : F("", !0)
+  setup(e) {
+    return (s, t) => (i(), j(ee, { name: "fade-slide" }, {
+      default: te(() => [
+        e.message ? (i(), f("div", we, [
+          E("p", Fe, S(e.message), 1)
+        ])) : K("", !0)
       ]),
       _: 1
     }));
   }
-}), ge = /* @__PURE__ */ L(ye, [["__scopeId", "data-v-a8be2d7b"]]), we = { class: "ns-line fade-in" }, be = { class: "ns-prompt-row" }, ke = { class: "ns-prompt" }, Fe = {
+}), $e = /* @__PURE__ */ G(xe, [["__scopeId", "data-v-a8be2d7b"]]);
+function Ne() {
+  return typeof window > "u" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function De(e) {
+  const s = () => typeof e.text == "function" ? e.text() : e.text, t = C(0), n = C(!1);
+  let a = null, o = null;
+  const l = () => {
+    a !== null && (clearInterval(a), a = null), o !== null && (clearTimeout(o), o = null);
+  };
+  H(l), q(
+    [
+      () => s(),
+      () => e.speed,
+      () => e.enabled,
+      () => e.pauseAfter
+    ],
+    ([b, g, d, v]) => {
+      var k;
+      l();
+      const h = g ?? 38, V = d ?? !0, u = v ?? 100, $ = String(b || "");
+      if (!V || Ne() || $.length === 0) {
+        t.value = $.length, n.value = !0, (k = e.onComplete) == null || k.call(e);
+        return;
+      }
+      t.value = 0, n.value = !1, a = setInterval(() => {
+        t.value++, t.value >= $.length && (a !== null && (clearInterval(a), a = null), o = setTimeout(() => {
+          var T;
+          n.value = !0, (T = e.onComplete) == null || T.call(e);
+        }, u));
+      }, h);
+    },
+    { immediate: !0 }
+  );
+  const r = x(() => s().slice(0, t.value)), y = x(() => t.value < s().length && !n.value);
+  return {
+    displayedText: r,
+    isTyping: y,
+    isComplete: n
+  };
+}
+const Be = /* @__PURE__ */ N({
+  __name: "Cursor",
+  props: {
+    cursorChar: { default: "|" },
+    className: {}
+  },
+  setup(e) {
+    const s = e, t = x(() => ["ns-cursor", s.className].filter(Boolean).join(" "));
+    return (n, a) => (i(), f("span", {
+      class: R(t.value),
+      "aria-hidden": "true"
+    }, S(e.cursorChar), 3));
+  }
+}), Ve = /* @__PURE__ */ N({
+  __name: "Prose",
+  props: {
+    text: {},
+    animate: { type: Boolean, default: !0 },
+    speed: { default: 38 },
+    cursor: { type: Boolean, default: !0 },
+    cursorChar: { default: "|" },
+    pauseAfter: { default: 100 },
+    className: {}
+  },
+  emits: ["complete"],
+  setup(e, { emit: s }) {
+    const t = e, n = s, { displayedText: a, isTyping: o } = De({
+      text: () => t.text,
+      speed: t.speed,
+      enabled: t.animate,
+      pauseAfter: t.pauseAfter,
+      onComplete: () => n("complete")
+    }), l = x(() => [
+      "ns-prose",
+      o.value ? "ns-prose--typing" : void 0,
+      t.className
+    ].filter(Boolean).join(" "));
+    return (r, y) => (i(), f("span", {
+      class: R(l.value)
+    }, [
+      ne(S(L(a)) + " ", 1),
+      e.cursor && L(o) ? (i(), j(Be, {
+        key: 0,
+        cursorChar: e.cursorChar
+      }, null, 8, ["cursorChar"])) : K("", !0)
+    ], 2));
+  }
+}), Ae = ["aria-label", "title"], Te = /* @__PURE__ */ N({
+  __name: "EditIcon",
+  props: {
+    label: { default: "Edit" },
+    className: {}
+  },
+  emits: ["edit"],
+  setup(e, { emit: s }) {
+    const t = e, n = s, a = x(() => ["ns-edit-btn", t.className].filter(Boolean).join(" "));
+    return (o, l) => (i(), f("button", {
+      type: "button",
+      class: R(a.value),
+      onClick: l[0] || (l[0] = (r) => n("edit")),
+      "aria-label": e.label,
+      title: e.label
+    }, [...l[1] || (l[1] = [
+      E("svg", {
+        width: "14",
+        height: "14",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "aria-hidden": "true"
+      }, [
+        E("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }),
+        E("path", { d: "m15 5 4 4" })
+      ], -1)
+    ])], 10, Ae));
+  }
+}), Ie = { class: "ns-filled-value" }, Se = {
   key: 0,
-  class: "ns-value"
-}, he = {
+  class: "ns-suffix"
+}, Le = /* @__PURE__ */ N({
+  __name: "FilledValue",
+  props: {
+    value: {},
+    suffix: {},
+    editable: { type: Boolean, default: !0 },
+    editLabel: { default: "Edit" },
+    className: {}
+  },
+  emits: ["edit"],
+  setup(e, { emit: s }) {
+    const t = e, n = s, a = x(() => ["ns-filled-wrap", t.className].filter(Boolean).join(" "));
+    return (o, l) => (i(), f("span", {
+      class: R(a.value)
+    }, [
+      E("span", Ie, S(e.value), 1),
+      e.suffix ? (i(), f("span", Se, S(e.suffix), 1)) : K("", !0),
+      e.editable ? (i(), j(Te, {
+        key: 1,
+        label: e.editLabel,
+        onEdit: l[0] || (l[0] = (r) => n("edit"))
+      }, null, 8, ["label"])) : K("", !0)
+    ], 2));
+  }
+}), Ee = ["aria-label"], Ke = ["onClick", "onKeydown", "aria-selected", "tabindex"], Re = /* @__PURE__ */ N({
+  __name: "ChipsField",
+  props: {
+    fieldKey: {},
+    options: {},
+    defaultValue: {},
+    autoAdvance: { type: Boolean, default: !1 },
+    className: {}
+  },
+  emits: ["confirm", "change"],
+  setup(e, { emit: s }) {
+    const t = e, n = s, a = C(t.defaultValue ?? null), o = C(0), l = C([]), r = (d) => {
+      a.value = d, n("change", d), t.autoAdvance && n("confirm", d);
+    }, y = () => {
+      a.value !== null && n("confirm", a.value);
+    }, b = (d, v) => {
+      var h, V;
+      switch (d.key) {
+        case "Enter":
+        case " ": {
+          d.preventDefault();
+          const u = t.options[v];
+          u && r(u);
+          break;
+        }
+        case "ArrowRight":
+        case "ArrowDown": {
+          d.preventDefault();
+          const u = (v + 1) % t.options.length;
+          o.value = u, (h = l.value[u]) == null || h.focus();
+          break;
+        }
+        case "ArrowLeft":
+        case "ArrowUp": {
+          d.preventDefault();
+          const u = (v - 1 + t.options.length) % t.options.length;
+          o.value = u, (V = l.value[u]) == null || V.focus();
+          break;
+        }
+      }
+    }, g = x(() => ["ns-chips-wrap", t.className].filter(Boolean).join(" "));
+    return (d, v) => (i(), f("span", {
+      class: R(g.value),
+      role: "listbox",
+      "aria-label": e.fieldKey
+    }, [
+      (i(!0), f(P, null, U(e.options, (h, V) => (i(), f("button", {
+        key: h,
+        type: "button",
+        class: R(["ns-chip", a.value === h ? "ns-chip--active" : void 0].filter(Boolean).join(" ")),
+        onClick: (u) => r(h),
+        onKeydown: (u) => b(u, V),
+        "aria-selected": a.value === h,
+        role: "option",
+        tabindex: V === o.value ? 0 : -1,
+        ref_for: !0,
+        ref: (u) => {
+          u && (l.value[V] = u);
+        }
+      }, S(h), 43, Ke))), 128)),
+      !e.autoAdvance && a.value !== null ? (i(), f("button", {
+        key: 0,
+        type: "button",
+        class: "ns-enter-btn",
+        onClick: y,
+        "aria-label": "Confirm",
+        style: { opacity: "1", transform: "none" }
+      }, " ↵ ")) : K("", !0)
+    ], 10, Ee));
+  }
+}), je = ["onClick", "onKeydown", "onMouseenter", "aria-pressed"], Me = /* @__PURE__ */ N({
+  __name: "MultiChipsField",
+  props: {
+    fieldKey: {},
+    options: {},
+    defaultValue: { default: () => [] },
+    className: {}
+  },
+  emits: ["confirm", "change"],
+  setup(e, { emit: s }) {
+    const t = e, n = s, a = C(new Set(t.defaultValue)), o = C(null), l = (g) => {
+      a.value.has(g) ? a.value.delete(g) : a.value.add(g);
+      const d = Array.from(a.value).join(", ");
+      n("change", d);
+    }, r = () => {
+      a.value.size > 0 && n("confirm", Array.from(a.value).join(", "));
+    }, y = (g, d) => {
+      g.key === "Enter" && a.value.size > 0 ? (g.preventDefault(), r()) : g.key === " " && (g.preventDefault(), l(d));
+    }, b = x(() => ["ns-chips-wrap", t.className].filter(Boolean).join(" "));
+    return (g, d) => (i(), f("span", {
+      class: R(b.value)
+    }, [
+      (i(!0), f(P, null, U(e.options, (v, h) => (i(), f("button", {
+        key: v,
+        type: "button",
+        class: R([
+          "ns-chip",
+          a.value.has(v) ? "ns-chip--active" : void 0,
+          o.value === h ? "ns-chip--hover" : void 0
+        ].filter(Boolean).join(" ")),
+        onClick: (V) => l(v),
+        onKeydown: (V) => y(V, v),
+        onMouseenter: (V) => o.value = h,
+        onMouseleave: d[0] || (d[0] = (V) => o.value = null),
+        "aria-pressed": a.value.has(v),
+        role: "option"
+      }, S(v), 43, je))), 128)),
+      a.value.size > 0 ? (i(), f("button", {
+        key: 0,
+        type: "button",
+        class: "ns-enter-btn",
+        onClick: r,
+        "aria-label": "Confirm"
+      }, " ↵ ")) : K("", !0)
+    ], 2));
+  }
+}), Pe = ["id", "value", "aria-label"], ze = {
+  value: "",
+  disabled: ""
+}, qe = ["value"], Oe = /* @__PURE__ */ N({
+  __name: "SelectField",
+  props: {
+    fieldKey: {},
+    options: {},
+    placeholder: { default: "Select…" },
+    defaultValue: { default: "" },
+    autoAdvance: { type: Boolean, default: !1 },
+    inputClassName: {},
+    className: {}
+  },
+  emits: ["confirm", "change", "focus", "blur"],
+  setup(e, { emit: s }) {
+    const t = e, n = s, a = C(t.defaultValue), o = C(null);
+    O(() => {
+      var d;
+      (d = o.value) == null || d.focus();
+    });
+    const l = (d) => {
+      const h = d.target.value;
+      a.value = h, n("change", h), t.autoAdvance && h !== "" && n("confirm", h);
+    }, r = (d) => {
+      d.key === "Enter" && a.value !== "" && (d.preventDefault(), n("confirm", a.value));
+    }, y = () => {
+      a.value !== "" && n("confirm", a.value);
+    }, b = x(() => ["ns-select-wrap", t.className].filter(Boolean).join(" ")), g = x(() => ["ns-select", t.inputClassName].filter(Boolean).join(" "));
+    return (d, v) => (i(), f("span", {
+      class: R(b.value)
+    }, [
+      E("select", {
+        ref_key: "selectRef",
+        ref: o,
+        id: `ns-field-${e.fieldKey}`,
+        class: R(g.value),
+        value: a.value,
+        onChange: l,
+        onKeydown: r,
+        onFocus: v[0] || (v[0] = (h) => n("focus")),
+        onBlur: v[1] || (v[1] = (h) => n("blur", a.value)),
+        "aria-label": e.fieldKey
+      }, [
+        E("option", ze, S(e.placeholder), 1),
+        (i(!0), f(P, null, U(e.options, (h) => (i(), f("option", {
+          key: h,
+          value: h
+        }, S(h), 9, qe))), 128))
+      ], 42, Pe),
+      !e.autoAdvance && a.value !== "" ? (i(), f("button", {
+        key: 0,
+        type: "button",
+        class: "ns-enter-btn",
+        onClick: y,
+        "aria-label": "Confirm"
+      }, " ↵ ")) : K("", !0)
+    ], 2));
+  }
+}), Ue = { class: "ns-otp-boxes" }, We = ["value", "onInput", "onKeydown", "onFocus", "aria-label"], He = { class: "ns-otp-resend-wrap" }, Ge = {
+  key: 1,
+  class: "ns-otp-resend ns-otp-resend--disabled"
+}, Ze = { class: "ns-otp-timer" }, _e = /* @__PURE__ */ N({
+  __name: "OtpField",
+  props: {
+    fieldKey: {},
+    otpLength: { default: 6 },
+    autoAdvance: { type: Boolean, default: !0 },
+    onRequest: {},
+    onVerify: {},
+    resendLabel: { default: "Resend code" },
+    resendDelay: { default: 30 },
+    className: {}
+  },
+  emits: ["confirm", "change"],
+  setup(e, { emit: s }) {
+    const t = e, n = s, a = C(Array.from({ length: t.otpLength }, () => "")), o = C(0), l = C(t.resendDelay), r = C(!1), y = C([]);
+    let b = null;
+    const g = C(!1), d = () => {
+      if (t.resendDelay <= 0) {
+        r.value = !0;
+        return;
+      }
+      l.value = t.resendDelay, r.value = !1, b !== null && clearInterval(b), b = setInterval(() => {
+        l.value -= 1, l.value <= 0 && (b !== null && clearInterval(b), r.value = !0);
+      }, 1e3);
+    };
+    O(() => {
+      var m, c;
+      g.value || (g.value = !0, (m = t.onRequest) == null || m.call(t)), (c = y.value[0]) == null || c.focus(), d();
+    }), H(() => {
+      b !== null && clearInterval(b);
+    }), q(() => t.resendDelay, d);
+    const v = (m) => m.join(""), h = (m, c) => {
+      var F, w;
+      const A = c.target.value.replace(/\D/g, "").slice(-1);
+      a.value[m] = A;
+      const B = v(a.value);
+      n("change", B), A !== "" && m < t.otpLength - 1 && ((F = y.value[m + 1]) == null || F.focus(), o.value = m + 1), a.value.every((I) => I !== "") && ((w = t.onVerify) == null || w.call(t, B), t.autoAdvance && setTimeout(() => n("confirm", B), 0));
+    }, V = (m, c) => {
+      var p, D, A;
+      if (c.key === "Backspace")
+        c.preventDefault(), a.value[m] !== "" ? (a.value[m] = "", n("change", v(a.value))) : m > 0 && (a.value[m - 1] = "", (p = y.value[m - 1]) == null || p.focus(), o.value = m - 1, n("change", v(a.value)));
+      else if (c.key === "Enter") {
+        c.preventDefault();
+        const B = v(a.value);
+        a.value.every((F) => F !== "") && n("confirm", B);
+      } else c.key === "ArrowLeft" && m > 0 ? (c.preventDefault(), (D = y.value[m - 1]) == null || D.focus(), o.value = m - 1) : c.key === "ArrowRight" && m < t.otpLength - 1 && (c.preventDefault(), (A = y.value[m + 1]) == null || A.focus(), o.value = m + 1);
+    }, u = (m) => {
+      var B, F, w;
+      m.preventDefault();
+      const c = ((B = m.clipboardData) == null ? void 0 : B.getData("text").replace(/\D/g, "").slice(0, t.otpLength)) || "";
+      if (c.length === 0) return;
+      for (let I = 0; I < c.length; I++) {
+        const _ = c[I];
+        _ !== void 0 && (a.value[I] = _);
+      }
+      const p = v(a.value);
+      n("change", p);
+      const D = a.value.findIndex((I) => I === ""), A = D === -1 ? t.otpLength - 1 : D;
+      (F = y.value[A]) == null || F.focus(), o.value = A, a.value.every((I) => I !== "") && ((w = t.onVerify) == null || w.call(t, p), t.autoAdvance && setTimeout(() => n("confirm", p), 0));
+    }, $ = () => {
+      var m, c;
+      r.value && (r.value = !1, a.value = Array.from({ length: t.otpLength }, () => ""), o.value = 0, (m = y.value[0]) == null || m.focus(), (c = t.onRequest) == null || c.call(t), d());
+    }, k = (m) => {
+      o.value = m;
+    }, T = () => {
+      n("confirm", v(a.value));
+    }, M = x(() => ["ns-otp-wrap", t.className].filter(Boolean).join(" "));
+    return (m, c) => (i(), f("span", {
+      class: R(M.value)
+    }, [
+      E("span", Ue, [
+        (i(!0), f(P, null, U(a.value, (p, D) => (i(), f("input", {
+          key: D,
+          ref_for: !0,
+          ref: (A) => {
+            A && (y.value[D] = A);
+          },
+          type: "text",
+          inputmode: "numeric",
+          maxlength: 1,
+          class: R([
+            "ns-otp-box",
+            p !== "" ? "ns-otp-box--filled" : void 0,
+            o.value === D ? "ns-otp-box--active" : void 0
+          ].filter(Boolean).join(" ")),
+          value: p,
+          onInput: (A) => h(D, A),
+          onKeydown: (A) => V(D, A),
+          onPaste: u,
+          onFocus: (A) => k(D),
+          autocomplete: "one-time-code",
+          "aria-label": `Digit ${D + 1}`
+        }, null, 42, We))), 128))
+      ]),
+      !e.autoAdvance && a.value.every((p) => p !== "") ? (i(), f("button", {
+        key: 0,
+        type: "button",
+        class: "ns-enter-btn",
+        onClick: T,
+        "aria-label": "Confirm"
+      }, " ↵ ")) : K("", !0),
+      E("span", He, [
+        r.value ? (i(), f("button", {
+          key: 0,
+          type: "button",
+          class: "ns-otp-resend",
+          onClick: $
+        }, S(e.resendLabel), 1)) : (i(), f("span", Ge, [
+          E("span", Ze, " Resend in " + S(l.value) + "s ", 1)
+        ]))
+      ])
+    ], 2));
+  }
+}), Je = /* @__PURE__ */ N({
+  __name: "EnterButton",
+  props: {
+    label: { default: "↵" },
+    className: {}
+  },
+  emits: ["confirm"],
+  setup(e, { emit: s }) {
+    const t = e, n = s, a = x(() => ["ns-enter-btn", t.className].filter(Boolean).join(" "));
+    return (o, l) => (i(), f("button", {
+      type: "button",
+      class: R(a.value),
+      onClick: l[0] || (l[0] = (r) => n("confirm")),
+      "aria-label": "Confirm"
+    }, S(e.label), 3));
+  }
+}), Qe = ["id", "type", "inputmode", "value", "placeholder", "aria-label"], Xe = {
+  key: 0,
+  class: "ns-suffix"
+}, z = /* @__PURE__ */ N({
+  __name: "InlineInput",
+  props: {
+    fieldKey: {},
+    type: { default: "text" },
+    placeholder: {},
+    defaultValue: { default: "" },
+    suffix: {},
+    sanitise: {},
+    inputClassName: {},
+    className: {}
+  },
+  emits: ["confirm", "change", "focus", "blur", "escape"],
+  setup(e, { emit: s }) {
+    const t = e, n = s, a = C(t.defaultValue), o = C(!1), l = C(null);
+    O(() => {
+      var k;
+      (k = l.value) == null || k.focus();
+    });
+    const r = (k) => {
+      const T = t.sanitise ? t.sanitise(k) : k;
+      a.value = T, n("change", T);
+    }, y = (k) => {
+      const T = k.target;
+      r(T.value);
+    }, b = (k) => {
+      var M;
+      if (!t.sanitise) return;
+      k.preventDefault();
+      const T = ((M = k.clipboardData) == null ? void 0 : M.getData("text")) || "";
+      r(T);
+    }, g = (k) => {
+      k.key === "Enter" ? (k.preventDefault(), n("confirm", a.value)) : k.key === "Escape" && (k.preventDefault(), n("escape"));
+    }, d = () => {
+      o.value = !0, n("focus");
+    }, v = () => {
+      o.value = !1, n("blur", a.value);
+    }, h = () => {
+      n("confirm", a.value);
+    }, V = x(() => ["ns-input-wrap", t.className].filter(Boolean).join(" ")), u = x(() => [
+      "ns-input",
+      `ns-input--${t.type}`,
+      o.value ? "ns-input--focused" : void 0,
+      t.inputClassName
+    ].filter(Boolean).join(" ")), $ = x(() => {
+      switch (t.type) {
+        case "tel":
+          return "tel";
+        case "email":
+          return "email";
+        case "number":
+          return "numeric";
+        default:
+          return;
+      }
+    });
+    return (k, T) => (i(), f("span", {
+      class: R(V.value)
+    }, [
+      E("input", {
+        ref_key: "inputRef",
+        ref: l,
+        id: `ns-field-${e.fieldKey}`,
+        class: R(u.value),
+        type: e.type === "number" ? "text" : e.type,
+        inputmode: $.value,
+        value: a.value,
+        placeholder: e.placeholder,
+        onInput: y,
+        onKeydown: g,
+        onFocus: d,
+        onBlur: v,
+        onPaste: b,
+        autocomplete: "off",
+        "aria-label": e.fieldKey
+      }, null, 42, Qe),
+      Z(Je, { onConfirm: h }),
+      e.suffix ? (i(), f("span", Xe, S(e.suffix), 1)) : K("", !0)
+    ], 2));
+  }
+}), Ye = /* @__PURE__ */ N({
+  __name: "PasswordField",
+  props: {
+    fieldKey: {},
+    placeholder: {},
+    defaultValue: {},
+    suffix: {},
+    inputClassName: {},
+    className: {}
+  },
+  emits: ["confirm", "change", "focus", "blur"],
+  setup(e, { emit: s }) {
+    const t = e, n = s;
+    return (a, o) => (i(), j(z, W(t, {
+      type: "password",
+      onConfirm: o[0] || (o[0] = (l) => n("confirm", l)),
+      onChange: o[1] || (o[1] = (l) => n("change", l)),
+      onFocus: o[2] || (o[2] = (l) => n("focus")),
+      onBlur: o[3] || (o[3] = (l) => n("blur", l))
+    }), null, 16));
+  }
+}), et = /* @__PURE__ */ N({
+  __name: "DateField",
+  props: {
+    fieldKey: {},
+    placeholder: {},
+    defaultValue: {},
+    suffix: {},
+    inputClassName: {},
+    className: {}
+  },
+  emits: ["confirm", "change", "focus", "blur"],
+  setup(e, { emit: s }) {
+    const t = e, n = s;
+    return (a, o) => (i(), j(z, W(t, {
+      type: "date",
+      onConfirm: o[0] || (o[0] = (l) => n("confirm", l)),
+      onChange: o[1] || (o[1] = (l) => n("change", l)),
+      onFocus: o[2] || (o[2] = (l) => n("focus")),
+      onBlur: o[3] || (o[3] = (l) => n("blur", l))
+    }), null, 16));
+  }
+}), tt = /* @__PURE__ */ N({
+  __name: "TextField",
+  props: {
+    fieldKey: {},
+    placeholder: {},
+    defaultValue: {},
+    suffix: {},
+    inputClassName: {},
+    className: {}
+  },
+  emits: ["confirm", "change", "focus", "blur"],
+  setup(e, { emit: s }) {
+    const t = e, n = s;
+    return (a, o) => (i(), j(z, W(t, {
+      type: "text",
+      onConfirm: o[0] || (o[0] = (l) => n("confirm", l)),
+      onChange: o[1] || (o[1] = (l) => n("change", l)),
+      onFocus: o[2] || (o[2] = (l) => n("focus")),
+      onBlur: o[3] || (o[3] = (l) => n("blur", l))
+    }), null, 16));
+  }
+}), nt = /* @__PURE__ */ N({
+  __name: "EmailField",
+  props: {
+    fieldKey: {},
+    placeholder: {},
+    defaultValue: {},
+    suffix: {},
+    inputClassName: {},
+    className: {}
+  },
+  emits: ["confirm", "change", "focus", "blur"],
+  setup(e, { emit: s }) {
+    const t = e, n = s;
+    return (a, o) => (i(), j(z, W(t, {
+      type: "email",
+      onConfirm: o[0] || (o[0] = (l) => n("confirm", l)),
+      onChange: o[1] || (o[1] = (l) => n("change", l)),
+      onFocus: o[2] || (o[2] = (l) => n("focus")),
+      onBlur: o[3] || (o[3] = (l) => n("blur", l))
+    }), null, 16));
+  }
+}), lt = /* @__PURE__ */ N({
+  __name: "NumberField",
+  props: {
+    fieldKey: {},
+    placeholder: {},
+    defaultValue: {},
+    suffix: {},
+    inputClassName: {},
+    className: {}
+  },
+  emits: ["confirm", "change", "focus", "blur"],
+  setup(e, { emit: s }) {
+    const t = e, n = s, a = (o) => o.replace(/[^\d.-]/g, "");
+    return (o, l) => (i(), j(z, W(t, {
+      type: "number",
+      sanitise: a,
+      onConfirm: l[0] || (l[0] = (r) => n("confirm", r)),
+      onChange: l[1] || (l[1] = (r) => n("change", r)),
+      onFocus: l[2] || (l[2] = (r) => n("focus")),
+      onBlur: l[3] || (l[3] = (r) => n("blur", r))
+    }), null, 16));
+  }
+}), at = /* @__PURE__ */ N({
+  __name: "TelField",
+  props: {
+    fieldKey: {},
+    placeholder: {},
+    defaultValue: {},
+    suffix: {},
+    inputClassName: {},
+    className: {}
+  },
+  emits: ["confirm", "change", "focus", "blur"],
+  setup(e, { emit: s }) {
+    const t = e, n = s, a = (o) => o.replace(/\D/g, "");
+    return (o, l) => (i(), j(z, W(t, {
+      type: "tel",
+      sanitise: a,
+      onConfirm: l[0] || (l[0] = (r) => n("confirm", r)),
+      onChange: l[1] || (l[1] = (r) => n("change", r)),
+      onFocus: l[2] || (l[2] = (r) => n("focus")),
+      onBlur: l[3] || (l[3] = (r) => n("blur", r))
+    }), null, 16));
+  }
+}), st = { class: "ns-prompt-row" }, ot = {
   key: 0,
   class: "ns-input-row"
-}, Ce = ["type", "disabled", "value", "onKeydown"], xe = /* @__PURE__ */ _({
+}, rt = /* @__PURE__ */ N({
   __name: "Line",
   props: {
     field: {},
@@ -112,79 +774,105 @@ const ae = { class: "ns-welcome fade-in" }, ie = { class: "ns-welcome-title" },
     editLabel: {}
   },
   emits: ["typingComplete", "confirm", "edit", "error", "change", "focus", "blur"],
-  setup(n, { emit: e }) {
-    const t = n, l = e, u = g(null), p = g(""), c = g(t.value ? String(t.value) : ""), i = g(null), h = g(!1);
-    let I;
-    E(() => t.value, (v) => {
-      v !== void 0 && String(v) !== c.value && (c.value = String(v));
-    }), E(() => t.status, (v) => {
-      if (v === "typing") {
-        if (!t.typewriter.enabled) {
-          p.value = t.field.prompt, l("typingComplete", t.field.key);
-          return;
-        }
-        let o = 0;
-        I = setInterval(() => {
-          p.value = t.field.prompt.slice(0, o + 1), o++, o >= t.field.prompt.length && (clearInterval(I), l("typingComplete", t.field.key));
-        }, t.typewriter.speed ?? 30);
-      } else (v === "active" || v === "editing") && O(() => {
-        var o;
-        (o = u.value) == null || o.focus();
-      });
-    }, { immediate: !0 }), N(() => {
-      clearInterval(I);
+  setup(e, { emit: s }) {
+    const t = e, n = s, a = {
+      chips: Re,
+      "multi-chips": Me,
+      select: Oe,
+      otp: _e,
+      password: Ye,
+      date: et,
+      text: tt,
+      email: nt,
+      number: lt,
+      tel: at
+    }, o = x(() => a[t.field.type] || z), l = C(t.value !== void 0 ? t.value : ""), r = C(null), y = C(!1), b = x(() => t.field.editable !== !1 && t.editable && !t.locked), g = x(() => {
+      var u;
+      return t.field.animate !== !1 && ((u = t.typewriter) == null ? void 0 : u.enabled) !== !1;
+    });
+    q(() => t.value, (u) => {
+      u !== void 0 && u !== l.value && (l.value = u);
     });
-    const R = (v) => {
-      const o = v.target;
-      c.value = o.value, l("change", t.field.key, o.value), i.value && (i.value = null);
-    }, D = async () => {
-      const v = ee(t.field, c.value);
-      if (!v.valid) {
-        i.value = v.error || "Invalid input", l("error", t.field.key, i.value);
+    const d = () => {
+      t.status === "typing" && n("typingComplete", t.field.key);
+    }, v = (u) => {
+      l.value = u;
+      const $ = Array.isArray(u) ? u.join(", ") : String(u);
+      n("change", t.field.key, $), r.value && (r.value = null);
+    }, h = async (u) => {
+      l.value = u;
+      const $ = Array.isArray(u) ? u.join(", ") : String(u), k = re(t.field, u, t.allValues);
+      if (!k.valid) {
+        r.value = k.error || "Invalid input", n("error", t.field.key, r.value);
         return;
       }
-      if (te(t.field)) {
-        h.value = !0;
-        const o = await ne(t.field, c.value);
-        if (h.value = !1, !o.valid) {
-          i.value = o.error || "Invalid input", l("error", t.field.key, i.value);
+      if (ie(t.field)) {
+        y.value = !0;
+        const T = await ue(t.field, u, t.allValues);
+        if (y.value = !1, !T.valid) {
+          r.value = T.error || "Invalid input", n("error", t.field.key, r.value);
           return;
         }
       }
-      i.value = null, l("confirm", t.field.key, c.value);
+      r.value = null, n("confirm", t.field.key, $);
+    }, V = () => {
+      r.value = null, n("edit", t.field.key);
+    };
+    return (u, $) => {
+      var k, T, M, m;
+      return i(), f("div", {
+        class: R(["ns-line fade-in", e.field.className])
+      }, [
+        E("div", st, [
+          Z(Ve, {
+            text: e.field.prefix || e.field.prompt || "",
+            animate: e.status === "typing" && g.value,
+            speed: (k = e.typewriter) == null ? void 0 : k.speed,
+            cursor: ((T = e.typewriter) == null ? void 0 : T.cursor) !== !1,
+            cursorChar: (M = e.typewriter) == null ? void 0 : M.cursorChar,
+            pauseAfter: (m = e.typewriter) == null ? void 0 : m.pauseAfter,
+            onComplete: d
+          }, null, 8, ["text", "animate", "speed", "cursor", "cursorChar", "pauseAfter"]),
+          e.status === "confirmed" ? (i(), j(Le, {
+            key: 0,
+            value: Array.isArray(l.value) ? l.value.join(", ") : String(l.value),
+            suffix: e.field.suffix,
+            editable: b.value,
+            editLabel: e.editLabel,
+            onEdit: V
+          }, null, 8, ["value", "suffix", "editable", "editLabel"])) : K("", !0)
+        ]),
+        e.status === "active" || e.status === "editing" ? (i(), f("div", ot, [
+          (i(), j(le(o.value), {
+            fieldKey: e.field.key,
+            type: e.field.type,
+            placeholder: e.field.placeholder,
+            defaultValue: e.status === "editing" ? l.value : e.field.defaultValue,
+            suffix: e.field.suffix,
+            options: e.field.options,
+            otpLength: e.field.otpLength,
+            autoAdvance: e.field.autoAdvance,
+            resendLabel: e.field.resendLabel,
+            resendDelay: e.field.resendDelay,
+            sanitise: e.field.sanitise,
+            inputClassName: e.field.inputClassName,
+            disabled: y.value,
+            onConfirm: h,
+            onChange: v,
+            onFocus: $[0] || ($[0] = (c) => n("focus", e.field.key)),
+            onBlur: $[1] || ($[1] = (c) => n("blur", e.field.key, c)),
+            onRequest: $[2] || ($[2] = (c) => e.field.onRequest && e.field.onRequest()),
+            onVerify: $[3] || ($[3] = (c) => e.field.onVerify && e.field.onVerify(c))
+          }, null, 40, ["fieldKey", "type", "placeholder", "defaultValue", "suffix", "options", "otpLength", "autoAdvance", "resendLabel", "resendDelay", "sanitise", "inputClassName", "disabled"]))
+        ])) : K("", !0),
+        Z($e, { message: r.value }, null, 8, ["message"])
+      ], 2);
     };
-    return (v, o) => (f(), y("div", we, [
-      $("div", be, [
-        $("span", ke, k(n.status === "typing" ? p.value : n.field.prompt), 1),
-        n.status === "confirmed" ? (f(), y("span", Fe, k(c.value), 1)) : F("", !0),
-        n.status === "confirmed" && n.editable && !n.locked ? (f(), y("button", {
-          key: 1,
-          type: "button",
-          class: "ns-edit-btn",
-          onClick: o[0] || (o[0] = (B) => l("edit", n.field.key))
-        }, k(n.editLabel), 1)) : F("", !0)
-      ]),
-      n.status === "active" || n.status === "editing" ? (f(), y("div", he, [
-        $("input", {
-          ref_key: "inputRef",
-          ref: u,
-          type: n.field.type === "email" ? "email" : n.field.type === "password" ? "password" : "text",
-          class: "ns-input",
-          disabled: h.value,
-          value: c.value,
-          onInput: R,
-          onFocus: o[1] || (o[1] = (B) => l("focus", n.field.key)),
-          onBlur: o[2] || (o[2] = (B) => l("blur", n.field.key, c.value)),
-          onKeydown: G(J(D, ["prevent"]), ["enter"])
-        }, null, 40, Ce)
-      ])) : F("", !0),
-      Q(ge, { message: i.value }, null, 8, ["message"])
-    ]));
   }
-}), $e = /* @__PURE__ */ L(xe, [["__scopeId", "data-v-d4b482a6"]]), Ie = {
+}), it = /* @__PURE__ */ G(rt, [["__scopeId", "data-v-7fe5da13"]]), ut = {
   key: 1,
   class: "ns-form-body"
-}, Se = /* @__PURE__ */ _({
+}, ct = /* @__PURE__ */ N({
   __name: "NarrativeForm",
   props: {
     fields: {},
@@ -200,120 +888,270 @@ const ae = { class: "ns-welcome fade-in" }, ie = { class: "ns-welcome-title" },
     strings: {},
     reducedMotion: { type: Boolean }
   },
-  setup(n) {
-    const e = n, t = x(() => e.fields ? e.fields : e.formConfig ? e.formConfig.fields : []), l = x(() => {
-      if (e.welcome) return e.welcome;
-      if (e.formConfig && "welcome" in e.formConfig) return e.formConfig.welcome;
-    }), u = x(() => {
-      if (e.done) return e.done;
-      if (e.formConfig && "done" in e.formConfig) return e.formConfig.done;
-    }), p = x(() => {
-      var d;
+  setup(e) {
+    const s = e, t = x(() => s.fields ? s.fields : s.formConfig ? s.formConfig.fields : []), n = x(() => {
+      if (s.welcome) return s.welcome;
+      if (s.formConfig && "welcome" in s.formConfig) return s.formConfig.welcome;
+    }), a = x(() => {
+      if (s.done) return s.done;
+      if (s.formConfig && "done" in s.formConfig) return s.formConfig.done;
+    }), o = x(() => {
+      var c;
       return {
-        ...e.typewriter,
-        enabled: e.reducedMotion ? !1 : ((d = e.typewriter) == null ? void 0 : d.enabled) ?? !0
+        ...s.typewriter,
+        enabled: s.reducedMotion ? !1 : ((c = s.typewriter) == null ? void 0 : c.enabled) ?? !0
       };
-    }), c = x(() => le(e.strings)), {
-      snapshot: i,
-      startTyping: h,
-      activateField: I,
-      confirmField: R,
-      editField: D,
+    }), l = x(() => ce(s.strings)), {
+      snapshot: r,
+      startTyping: y,
+      activateField: b,
+      confirmField: g,
+      editField: d,
       reconfirmField: v,
-      getMeta: o
-    } = se(t.value), B = x(() => {
-      var d;
-      return ((d = l.value) == null ? void 0 : d.show) !== !1 && l.value !== void 0;
-    }), S = g(!B.value), W = g(!1), K = () => {
-      if (!S.value || W.value || t.value.length === 0) return;
-      W.value = !0;
-      const d = t.value.find((a) => i.value.statuses[a.key] !== "confirmed");
-      d && h(d.key);
+      getMeta: h
+    } = fe(t.value), V = x(() => {
+      var c;
+      return ((c = n.value) == null ? void 0 : c.show) !== !1 && n.value !== void 0;
+    }), u = C(!V.value), $ = C(!1), k = () => {
+      if (!u.value || $.value || t.value.length === 0) return;
+      $.value = !0;
+      const c = t.value.find((p) => r.value.statuses[p.key] !== "confirmed");
+      c && y(c.key);
     };
-    E(S, K), H(K);
-    const P = (d, a) => {
-      var m;
-      i.value.statuses[d] === "editing" ? v(d, a) : R(d, a), (m = e.callbacks) != null && m.onFieldComplete && e.callbacks.onFieldComplete(d, a, 0);
-      const T = t.value.findIndex((r) => r.key === d);
-      for (let r = T + 1; r < t.value.length; r++) {
-        const s = t.value[r];
-        if (!(!s || i.value.statuses[s.key] === "confirmed")) {
-          h(s.key);
+    q(u, k), O(k);
+    const T = (c, p) => {
+      var B;
+      r.value.statuses[c] === "editing" ? v(c, p) : g(c, p), (B = s.callbacks) != null && B.onFieldComplete && s.callbacks.onFieldComplete(c, p, 0);
+      const A = t.value.findIndex((F) => F.key === c);
+      for (let F = A + 1; F < t.value.length; F++) {
+        const w = t.value[F];
+        if (!(!w || r.value.statuses[w.key] === "confirmed")) {
+          y(w.key);
           break;
         }
       }
-    }, A = x(() => t.value.filter((d) => {
-      const a = i.value.statuses[d.key];
-      return a === "typing" || a === "active" || a === "confirmed" || a === "editing";
-    })), M = g(null);
-    return E(() => A.value.length, () => {
-      O(() => {
-        M.value && (M.value.scrollTop = M.value.scrollHeight);
+    }, M = x(() => t.value.filter((c) => {
+      const p = r.value.statuses[c.key];
+      return p === "typing" || p === "active" || p === "confirmed" || p === "editing";
+    })), m = C(null);
+    return q(() => M.value.length, () => {
+      ae(() => {
+        m.value && (m.value.scrollTop = m.value.scrollHeight);
       });
-    }), (d, a) => (f(), y("div", {
+    }), (c, p) => (i(), f("div", {
       class: "ns-root",
       ref_key: "scrollContainerRef",
-      ref: M
+      ref: m
     }, [
-      !S.value && l.value ? (f(), V(ue, {
+      !u.value && n.value ? (i(), j(ge, {
         key: 0,
-        welcome: l.value,
-        typewriter: p.value,
-        onStart: a[0] || (a[0] = (C) => S.value = !0)
-      }, null, 8, ["welcome", "typewriter"])) : F("", !0),
-      S.value ? (f(), y("div", Ie, [
-        (f(!0), y(X, null, Y(A.value, (C) => {
-          var T;
-          return f(), V($e, {
-            key: C.key,
-            field: C,
-            status: b(i).statuses[C.key] ?? "idle",
-            value: ((T = e.values) == null ? void 0 : T[C.key]) ?? b(i).values[C.key],
-            allValues: b(i).values,
-            typewriter: p.value,
-            editable: e.editable,
+        welcome: n.value,
+        typewriter: o.value,
+        onStart: p[0] || (p[0] = (D) => u.value = !0)
+      }, null, 8, ["welcome", "typewriter"])) : K("", !0),
+      u.value ? (i(), f("div", ut, [
+        (i(!0), f(P, null, U(M.value, (D) => {
+          var A;
+          return i(), j(it, {
+            key: D.key,
+            field: D,
+            status: L(r).statuses[D.key] ?? "idle",
+            value: ((A = s.values) == null ? void 0 : A[D.key]) ?? L(r).values[D.key],
+            allValues: L(r).values,
+            typewriter: o.value,
+            editable: s.editable,
             locked: !1,
-            editLabel: e.editLabel ?? c.value.editLabel,
-            onTypingComplete: b(I),
-            onConfirm: P,
-            onEdit: a[1] || (a[1] = (m) => {
-              var r, s;
-              b(D)(m), (s = (r = e.callbacks) == null ? void 0 : r.onEdit) == null || s.call(r, m);
+            editLabel: s.editLabel ?? l.value.editLabel,
+            onTypingComplete: L(b),
+            onConfirm: T,
+            onEdit: p[1] || (p[1] = (B) => {
+              var F, w;
+              L(d)(B), (w = (F = s.callbacks) == null ? void 0 : F.onEdit) == null || w.call(F, B);
             }),
-            onError: a[2] || (a[2] = (m, r) => {
-              var s, w;
-              return (w = (s = e.callbacks) == null ? void 0 : s.onError) == null ? void 0 : w.call(s, m, r);
+            onError: p[2] || (p[2] = (B, F) => {
+              var w, I;
+              return (I = (w = s.callbacks) == null ? void 0 : w.onError) == null ? void 0 : I.call(w, B, F);
             }),
-            onChange: a[3] || (a[3] = (m, r) => {
-              var s, w;
-              return (w = (s = e.callbacks) == null ? void 0 : s.onChange) == null ? void 0 : w.call(s, m, r);
+            onChange: p[3] || (p[3] = (B, F) => {
+              var w, I;
+              return (I = (w = s.callbacks) == null ? void 0 : w.onChange) == null ? void 0 : I.call(w, B, F);
             }),
-            onFocus: a[4] || (a[4] = (m) => {
-              var r, s;
-              return (s = (r = e.callbacks) == null ? void 0 : r.onFieldFocus) == null ? void 0 : s.call(r, m);
+            onFocus: p[4] || (p[4] = (B) => {
+              var F, w;
+              return (w = (F = s.callbacks) == null ? void 0 : F.onFieldFocus) == null ? void 0 : w.call(F, B);
             }),
-            onBlur: a[5] || (a[5] = (m, r) => {
-              var s, w;
-              return (w = (s = e.callbacks) == null ? void 0 : s.onFieldBlur) == null ? void 0 : w.call(s, m, r);
+            onBlur: p[5] || (p[5] = (B, F) => {
+              var w, I;
+              return (I = (w = s.callbacks) == null ? void 0 : w.onFieldBlur) == null ? void 0 : I.call(w, B, F);
             })
           }, null, 8, ["field", "status", "value", "allValues", "typewriter", "editable", "editLabel", "onTypingComplete"]);
         }), 128))
-      ])) : F("", !0),
-      b(i).isComplete && u.value ? (f(), V(fe, {
+      ])) : K("", !0),
+      L(r).isComplete && a.value ? (i(), j(ke, {
         key: 2,
-        done: u.value,
-        values: b(i).values,
-        meta: b(o)(),
-        typewriter: p.value
-      }, null, 8, ["done", "values", "meta", "typewriter"])) : F("", !0)
+        done: a.value,
+        values: L(r).values,
+        meta: L(h)(),
+        typewriter: o.value
+      }, null, 8, ["done", "values", "meta", "typewriter"])) : K("", !0)
     ], 512));
   }
-}), Be = /* @__PURE__ */ L(Se, [["__scopeId", "data-v-33050240"]]);
+}), gt = /* @__PURE__ */ G(ct, [["__scopeId", "data-v-33050240"]]), ht = /* @__PURE__ */ N({
+  __name: "ThemeProvider",
+  props: {
+    theme: { default: () => ({}) }
+  },
+  setup(e) {
+    const s = e, t = {
+      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"
+    }, n = C(!1);
+    let a = null;
+    const o = (b) => {
+      n.value = b.matches;
+    };
+    O(() => {
+      typeof window < "u" && (a = window.matchMedia("(prefers-color-scheme: dark)"), n.value = a.matches, a.addEventListener("change", o));
+    }), H(() => {
+      a && a.removeEventListener("change", o);
+    });
+    const l = x(() => s.theme.mode === "dark" ? !0 : s.theme.mode === "auto" ? n.value : !1), r = x(() => l.value && s.theme.dark ? { ...s.theme, ...s.theme.dark } : s.theme), y = x(() => {
+      const b = {};
+      for (const [g, d] of Object.entries(t)) {
+        const v = r.value[g];
+        typeof v == "string" && v.length > 0 && (b[d] = v);
+      }
+      return b;
+    });
+    return J("themeContext", x(() => ({
+      theme: r.value,
+      isDark: l.value
+    }))), (b, g) => (i(), f("div", {
+      style: se(y.value),
+      class: R(l.value ? "ns-root--dark" : void 0)
+    }, [
+      Q(b.$slots, "default")
+    ], 6));
+  }
+}), dt = {
+  key: 0,
+  class: "ns-toast-container",
+  "aria-live": "polite"
+}, ft = {
+  key: 0,
+  class: "ns-toast-icon"
+}, mt = { class: "ns-toast-message" }, vt = ["onClick"], bt = /* @__PURE__ */ N({
+  __name: "ToastProvider",
+  setup(e) {
+    const s = C([]), t = (a, o = !1, l = "⚠") => {
+      const r = Math.random().toString(36).substring(2, 9);
+      s.value.push({ id: r, message: a, icon: o, iconChar: l }), setTimeout(() => {
+        s.value = s.value.filter((y) => y.id !== r);
+      }, 3e3);
+    }, n = (a) => {
+      s.value = s.value.filter((o) => o.id !== a);
+    };
+    return J("toastContext", { showToast: t, hideToast: n }), (a, o) => (i(), f(P, null, [
+      Q(a.$slots, "default"),
+      s.value.length > 0 ? (i(), f("div", dt, [
+        (i(!0), f(P, null, U(s.value, (l) => (i(), f("div", {
+          key: l.id,
+          class: "ns-toast ns-animate-fade-up"
+        }, [
+          l.icon ? (i(), f("span", ft, S(l.iconChar), 1)) : K("", !0),
+          E("span", mt, S(l.message), 1),
+          E("button", {
+            type: "button",
+            class: "ns-toast-close",
+            onClick: (r) => n(l.id),
+            "aria-label": "Close"
+          }, " × ", 8, vt)
+        ]))), 128))
+      ])) : K("", !0)
+    ], 64));
+  }
+});
+function Ct(e) {
+  const s = C(L(e.formConfig) ?? null), t = C(!!L(e.fieldsUrl) && !L(e.formConfig)), n = C(null), a = C(0);
+  return q(
+    [
+      () => L(e.fieldsUrl),
+      () => L(e.fieldsUrlHeaders),
+      () => L(e.formConfig),
+      a
+    ],
+    async ([l, r, y]) => {
+      var b;
+      if (y) {
+        s.value = y, t.value = !1, n.value = null;
+        return;
+      }
+      if (l) {
+        t.value = !0, n.value = null;
+        try {
+          const g = await de(l, { headers: r });
+          s.value = g;
+        } catch (g) {
+          const d = g instanceof Error ? g : new Error(String(g));
+          n.value = d, (b = e.onFetchError) == null || b.call(e, d);
+        } finally {
+          t.value = !1;
+        }
+      }
+    },
+    { immediate: !0 }
+  ), { config: s, loading: t, error: n, retry: () => {
+    L(e.fieldsUrl) && !L(e.formConfig) && a.value++;
+  } };
+}
 export {
-  fe as DoneScreen,
-  ge as ErrorMessage,
-  $e as Line,
-  Be as NarrativeForm,
-  ue as WelcomeScreen,
-  se as useFormState
+  Re as ChipsField,
+  Be as Cursor,
+  et as DateField,
+  ke as DoneScreen,
+  Te as EditIcon,
+  nt as EmailField,
+  Je as EnterButton,
+  $e as ErrorMessage,
+  Le as FilledValue,
+  z as InlineInput,
+  it as Line,
+  Me as MultiChipsField,
+  gt as NarrativeForm,
+  lt as NumberField,
+  _e as OtpField,
+  Ye as PasswordField,
+  Ve as Prose,
+  Oe as SelectField,
+  at as TelField,
+  tt as TextField,
+  ht as ThemeProvider,
+  bt as ToastProvider,
+  ge as WelcomeScreen,
+  Ct as useDynamicForm,
+  fe as useFormState,
+  De as useTypewriter
 };