@jfdevelops/react-multi-step-form 1.0.0-alpha.1 → 1.0.0-alpha.11

package/dist/index.mjs

@@ -1,62 +1,59 @@
-import { jsx as me, jsxs as q } from "react/jsx-runtime";
-import I from "react";
-function V(o, e, t) {
-  const r = [], s = new Set(o), n = t ? t.format(o.map((a) => `${a}`)) : `[${o.join(", ")}]`;
-  for (let a = 0; a < e.length; a++) {
-    const c = e[a];
-    s.has(c) || r.push(
-      `Extra element at index ${a}: "${c}" is not in ${n}`
+import { jsx as Te, jsxs as ie } from "react/jsx-runtime";
+import R from "react";
+function M(o, e, t) {
+  const r = [], s = new Set(o), n = t ? t.format(o.map((u) => `${u}`)) : `[${o.join(", ")}]`;
+  for (let u = 0; u < e.length; u++) {
+    const S = e[u];
+    s.has(S) || r.push(
+      `Extra element at index ${u}: "${S}" is not in ${n}`
     );
   }
-  return e.some((a) => s.has(a)) || r.push(
+  return e.some((u) => s.has(u)) || r.push(
     `Array must contain at least one valid element from ${n}`
   ), r.length > 0 ? { status: "error", errors: r } : { status: "success" };
 }
-function F(o) {
-  return o.map((e, t) => `❌ ${t + 1}. ${e}`).join(`
+function U(o, e) {
+  const t = (r, s) => `❌ ${s + 1}. ${r}`;
+  return o.map((r, s) => t(r, s)).join(`
 `);
 }
-function ye(o, ...e) {
+function ae(o) {
+  return Object.keys(o);
+}
+function Ae(o, ...e) {
   return () => String.raw({ raw: o }, ...e);
 }
-function d(o, e, t = Error) {
+function E(o, e, t = Error) {
   if (!o) {
-    const r = typeof e == "function" ? e() : ye`${e}`();
-    throw new t(r);
+    const r = new Intl.ListFormat("en", {
+      style: "long",
+      type: "conjunction"
+    }), s = typeof e == "function" ? e(r) : Ae`${e}`();
+    throw new t(s);
   }
 }
-function G(o, e) {
-  const t = o["~standard"].validate(e);
-  if (t instanceof Promise)
-    throw new TypeError("Schema validation must be synchronous", {
-      cause: o
-    });
-  if (t.issues)
-    throw new Error(JSON.stringify(t.issues, null, 2));
-  return t.value;
-}
-function C(o) {
-  d(o.includes("step"), "Can't extract a valid step number since");
+function q(o) {
+  E(o.includes("step"), "Can't extract a valid step number since");
   const e = o.replace("step", "");
-  return d(/^\d+$/.test(e), `Invalid step format: "${o}"`), Number.parseInt(e, 10);
+  return E(/^\d+$/.test(e), `Invalid step format: "${o}"`), Number.parseInt(e, 10);
 }
-function j(o) {
+function ee(o) {
   return function(e) {
     const { step: t } = e, r = `step${t}`, s = o[r];
     return { step: t, data: s };
   };
 }
-function J(o, e) {
+function K(o, e) {
   return e.reduce((t, r) => {
-    const s = C(r), { data: n } = j(o)({
+    const s = q(r), { data: n } = ee(o)({
       step: s
     });
-    for (const [a, c] of Object.entries(n))
-      typeof c == "function" && a !== "update" || (n[a] = c);
+    for (const [a, u] of Object.entries(n))
+      typeof u == "function" && a !== "update" || (n[a] = u);
     return t[r] = n, t;
   }, {});
 }
-function R(o, e) {
+function L(o, e) {
   const t = new Intl.ListFormat("en", {
     style: "long",
     type: "disjunction"
@@ -68,156 +65,73 @@ function R(o, e) {
     for (const a of r)
       n = {
         ...n,
-        [a]: j(o)({
-          step: C(a)
+        [a]: ee(o)({
+          step: q(a)
         })
       };
-    return Object.fromEntries(
-      r.map((a) => [
-        a,
-        j(o)({
-          step: C(a)
-        })
-      ])
+    return K(
+      o,
+      r
     );
   }
   if (Array.isArray(e))
-    return d(
+    return E(
       e.every((n) => r.includes(n)),
       () => {
-        const n = V(
+        const n = M(
           e,
-          r.map((a) => C(a)),
+          r.map((a) => q(a)),
           t
         );
         return n.status === "error" ? `${s()}. See errors:
- ${F(
+ ${U(
           n.errors
         )}` : s();
       }
-    ), J(
+    ), K(
       o,
       e
     );
   if (typeof e == "object") {
     const n = Object.keys(e);
-    return d(
+    return E(
       n.every((a) => r.includes(a)),
       () => {
-        const a = V(
+        const a = M(
           n,
           r,
           t
         );
         return a.status === "error" ? `${s()}. See errors:
- ${F(
+ ${U(
           a.errors
         )}` : s();
       }
-    ), J(
+    ), K(
       o,
       n
     );
   }
   throw new Error(`${s()} OR to "all"`);
 }
-function Y(o, e) {
+function Ve(o, e) {
   return typeof o == "function" ? o(e) : o;
 }
-class be {
-  values;
-  stepNumbers;
-  constructor(e, t) {
-    this.stepNumbers = t, this.values = e;
-  }
-  createCtxHelper(e) {
-    return e.reduce((t, r) => {
-      const s = C(r), { data: n } = j(this.values)({
-        step: s
-      });
-      for (const [a, c] of Object.entries(n))
-        typeof c == "function" && a !== "update" || (n[a] = c);
-      return t[r] = n, t;
-    }, {});
-  }
-  createCtx(e) {
-    const t = new Intl.ListFormat("en", {
-      style: "long",
-      type: "disjunction"
-    }), r = this.stepNumbers.map(
-      (n) => `step${n}`
-    ), s = () => `"stepData" must be set to an array of available steps (${t.format(
-      r
-    )})`;
-    if (e === "all")
-      return this.stepNumbers.reduce((n, a) => {
-        const c = `step${a}`;
-        return n[c] = j(this.values)({
-          step: a
-        }).data, n;
-      }, {});
-    if (Array.isArray(e))
-      return d(
-        e.every(
-          (n) => r.includes(n)
-        ),
-        () => {
-          const n = V(
-            e,
-            this.stepNumbers,
-            t
-          );
-          return n.status === "error" ? `${s()}. See errors:
- ${F(
-            n.errors
-          )}` : s();
-        }
-      ), this.createCtxHelper(e);
-    if (typeof e == "object") {
-      const n = Object.keys(e);
-      return d(
-        n.every((a) => r.includes(a)),
-        () => {
-          const a = V(
-            n,
-            r,
-            t
-          );
-          return a.status === "error" ? `${s()}. See errors:
- ${F(
-            a.errors
-          )}` : s();
-        }
-      ), this.createCtxHelper(n);
-    }
-    throw new Error(`${s()} OR to "all"`);
-  }
-  createStepHelperFnImpl(e) {
-    return (t, r) => {
-      const s = this.createCtx(e);
-      if (typeof t == "function")
-        return () => t({ ctx: s });
-      if (typeof t == "object")
-        return (n) => "validator" in t ? (d(
-          typeof n == "object",
-          "An input is expected since you provided a validator"
-        ), G(
-          t.validator,
-          n.data
-        ), r({ ctx: s, ...n })) : r({ ctx: s });
-      throw new Error(
-        `The first argument must be a function or an object, (was ${typeof t})`
-      );
-    };
-  }
-}
-class Se {
-  prefix;
-  includeTimestamp;
-  throwOnError;
+const G = "MultiStepFormSchema";
+class te {
+  debug;
+  prefix = G;
+  includeTimestamp = !1;
+  throwOnError = !1;
   constructor(e) {
-    const { includeTimestamp: t, prefix: r, throwOnError: s } = e ?? {};
-    this.prefix = r ?? "MultiStepFormSchema", this.includeTimestamp = t ?? !1, this.throwOnError = s ?? !1;
+    if (this.debug = e?.debug ?? !1, this.debug && e?.debug) {
+      const {
+        includeTimestamp: t = !1,
+        prefix: r = G,
+        throwOnError: s = !1
+      } = e;
+      this.includeTimestamp = t, this.prefix = typeof r == "string" ? r : r(G), this.throwOnError = s;
+    }
   }
   wrapValue(e, t) {
     if (e === "[]")
@@ -256,69 +170,571 @@ class Se {
       includeTimestamp: s = this.includeTimestamp,
       prefix: n,
       logLevelOptions: a
-    } = r ?? {}, c = this.formatPrefix(n), y = this.wrapValue(
+    } = r ?? {}, u = this.formatPrefix(n), S = this.wrapValue(
       a?.wrapWith ?? "[]",
       (a?.level ?? e).toUpperCase()
-    ), p = `${c} ${y} ${t}`;
-    return s ? `[${(/* @__PURE__ */ new Date()).toISOString()}] ${p}` : p;
+    ), g = `${u} ${S} ${t}`;
+    return s ? `[${(/* @__PURE__ */ new Date()).toISOString()}] ${g}` : g;
   }
   info(e, t) {
-    console.info(this.formatMessage("info", e, t));
+    this.debug && console.info(this.formatMessage("info", e, t));
   }
   warn(e, t) {
-    console.warn(this.formatMessage("warn", e, t));
+    this.debug && console.warn(this.formatMessage("warn", e, t));
   }
   error(e, t) {
+    if (!this.debug)
+      return;
     const r = this.formatMessage("error", e, t);
     if (console.error(r), t?.throw ?? this.throwOnError)
       throw new Error(r);
   }
 }
-const Z = '"window" in undefined. No storage is available', K = "MultiStepForm";
-class ue {
-  key;
-  store;
-  data;
-  log;
-  isWindowUndefined;
+var V;
+((o) => {
+  function e(i, l) {
+    return l.split(".").reduce((d, c) => d?.[c], i);
+  }
+  function t(i, l, d) {
+    const c = l.split(".");
+    let m = i;
+    for (let _ = 0; _ < c.length; _++) {
+      const $ = c[_];
+      _ === c.length - 1 ? m[$] !== void 0 && typeof m[$] == "object" && typeof d == "object" && d !== null ? Object.assign(m[$], d) : m[$] = d : ((typeof m[$] != "object" || m[$] === null) && (m[$] = {}), m = m[$]);
+    }
+    return m;
+  }
+  o.setBy = t;
+  function r(i) {
+    return i.filter((l) => !i.some((d) => d !== l && l.startsWith(d + ".")));
+  }
+  function s(i, ...l) {
+    const d = r(l);
+    if (d.length === 1)
+      return e(i, d[0]);
+    const c = {};
+    for (const m of d) {
+      const _ = e(i, m);
+      t(c, m, _);
+    }
+    return c;
+  }
+  o.pickBy = s;
+  function n(i) {
+    const l = [];
+    function d(c, m = "") {
+      if (c == null || typeof c != "object" || Array.isArray(c))
+        return;
+      const _ = Object.keys(c);
+      for (const $ of _) {
+        const A = m ? `${m}.${$}` : $;
+        l.push(A);
+        const T = c[$];
+        T != null && typeof T == "object" && !Array.isArray(T) && d(T, A);
+      }
+    }
+    return d(i), l;
+  }
+  o.createDeep = n;
+  function a(i) {
+    if (i === null) return "null";
+    if (Array.isArray(i)) return "Array";
+    const l = typeof i;
+    if (l !== "object") return l;
+    const d = i?.constructor?.name;
+    return d && d !== "Object" ? d : "object";
+  }
+  function u(i) {
+    if (!i) return [];
+    const l = [], d = /[^.[\]]+|\[(\d+)\]/g;
+    let c;
+    for (; c = d.exec(i); )
+      l.push(c[1] ?? c[0]);
+    return l;
+  }
+  function S(i, l) {
+    if (!i) return;
+    if (typeof i == "function")
+      return i;
+    const d = u(l);
+    let c = i, m;
+    for (const _ of d) {
+      if (!c) break;
+      if (typeof c == "function") {
+        m = c;
+        break;
+      }
+      if (c = c[_], typeof c == "function") {
+        m = c;
+        break;
+      }
+    }
+    return m;
+  }
+  function g(i, l, d) {
+    const c = S(d, l);
+    return c ? c(i, l) : a(i);
+  }
+  function p(i) {
+    return typeof i == "object" && i !== null;
+  }
+  function f(i, l, d, c, m) {
+    if (i === l)
+      return c;
+    if (i === null || l === null || typeof i != "object" || typeof l != "object") {
+      const $ = d || "(root)";
+      return typeof i != typeof l ? (c.push({
+        path: $,
+        expected: g(i, $, m.transformExpected),
+        actual: l,
+        reason: "type-mismatch"
+      }), c) : (m.includeValueMismatch && c.push({
+        path: $,
+        expected: g(i, $, m.transformExpected),
+        actual: l,
+        reason: "value-mismatch"
+      }), c);
+    }
+    if (Array.isArray(i) || Array.isArray(l)) {
+      if (!Array.isArray(i) || !Array.isArray(l)) {
+        const A = d || "(root)";
+        return c.push({
+          path: A,
+          expected: g(i, A, m.transformExpected),
+          actual: l,
+          reason: "type-mismatch"
+        }), c;
+      }
+      const $ = i.length;
+      for (let A = 0; A < $; A++) {
+        const T = i[A], C = l[A], N = d === "" ? `[${A}]` : `${d}[${A}]`;
+        f(T, C, N, c, m);
+      }
+      return c;
+    }
+    if (p(i) && p(l)) {
+      const $ = Object.keys(i), A = Object.keys(l);
+      for (const T of $) {
+        const C = i[T], N = l[T], F = d ? `${d}.${T}` : T;
+        if (!(T in l)) {
+          c.push({
+            path: F,
+            expected: g(C, F, m.transformExpected),
+            actual: void 0,
+            reason: "missing-key"
+          });
+          continue;
+        }
+        f(C, N, F, c, m);
+      }
+      for (const T of A)
+        if (!(T in i)) {
+          const C = d ? `${d}.${T}` : T;
+          c.push({
+            path: C,
+            expected: void 0,
+            actual: l[T],
+            reason: "extra-key"
+          });
+        }
+      return c;
+    }
+    const _ = d || "(root)";
+    return typeof i != typeof l ? c.push({
+      path: _,
+      expected: g(i, _, m.transformExpected),
+      actual: l,
+      reason: "type-mismatch"
+    }) : m.includeValueMismatch && c.push({
+      path: _,
+      expected: g(i, _, m.transformExpected),
+      actual: l,
+      reason: "value-mismatch"
+    }), c;
+  }
+  function v(i, l, d, c) {
+    const m = s(i, ...l), _ = [], $ = l.length === 1 ? l[0] : "";
+    return f(m, d, $, _, {
+      transformExpected: c?.transformExpected
+    }), {
+      ok: _.length === 0,
+      mismatches: _
+    };
+  }
+  o.equalsAtPaths = v;
+  function y(i) {
+    if (i === void 0) return "undefined";
+    if (typeof i == "string") return JSON.stringify(i);
+    try {
+      return JSON.stringify(i, null, 2);
+    } catch {
+      return String(i);
+    }
+  }
+  function h(i) {
+    switch (i.reason) {
+      case "missing-key":
+        return "Missing key";
+      case "extra-key":
+        return "Extra key";
+      case "type-mismatch":
+        return "Type mismatch";
+      case "value-mismatch":
+        return "Value mismatch";
+      default:
+        return i.reason;
+    }
+  }
+  function b(i) {
+    if (i.ok || i.mismatches.length === 0)
+      return "No mismatches.";
+    const l = [];
+    for (const d of i.mismatches)
+      l.push(
+        `
+● ${h(d)} at "${d.path}":`,
+        `    expected: ${y(d.expected)}`,
+        `    actual:   ${y(d.actual)}`,
+        ""
+        // blank line between entries
+      );
+    return l.at(-1) === "" && l.pop(), l.join(`
+`);
+  }
+  o.formatMismatches = b;
+  function O(i) {
+    const l = b(i);
+    l !== "No mismatches." && console.error(l);
+  }
+  o.printMismatches = O;
+  function w(i, l, d) {
+    const c = l.split(".");
+    function m(_, $) {
+      const A = c[$], T = Array.isArray(_) ? [..._] : { ..._ };
+      if ($ === c.length - 1) {
+        let P = _ && typeof _ == "object" ? T : {};
+        return P = {
+          ...P,
+          [A]: d
+        }, P;
+      }
+      const C = _ && typeof _ == "object" ? _[A] : void 0, N = m(C ?? {}, $ + 1);
+      let F = _ && typeof _ == "object" ? T : {};
+      return F = {
+        ...F,
+        [A]: N
+      }, F;
+    }
+    return m(i, 0);
+  }
+  function j(i, l, d) {
+    const c = r(l);
+    if (c.length === 0) return i;
+    let m = i;
+    if (c.length === 1) {
+      const _ = c[0];
+      return m = w(m, _, d), m;
+    }
+    for (const _ of c) {
+      const $ = e(d, _);
+      m = w(m, _, $);
+    }
+    return m;
+  }
+  o.updateAt = j;
+})(V || (V = {}));
+function Se(o, e) {
+  const t = o["~standard"].validate(e);
+  if (t instanceof Promise)
+    throw new TypeError("Schema validation must be synchronous", {
+      cause: o
+    });
+  if (t.issues)
+    throw new Error(JSON.stringify(t.issues, null, 2));
+  return t.value;
+}
+function be(o, e) {
+  return Object.keys(o).includes(e);
+}
+class re {
+  #e;
+  #t;
+  get value() {
+    return this.#e();
+  }
   constructor(e) {
-    const { key: t, data: r, store: s } = e;
-    this.log = new Se({
-      prefix: K
-    }), this.key = t, this.data = r, s ? (this.store = s, this.isWindowUndefined = !1) : typeof window < "u" ? (this.store = window.localStorage, this.isWindowUndefined = !1) : (this.isWindowUndefined = !0, this.log.warn(Z));
+    const { getValue: t, setValue: r } = e;
+    this.#e = t, this.#t = r;
   }
-  throwOnEmptyStore() {
-    d(this.store, () => this.isWindowUndefined ? Z : "No storage available");
+  handlePostUpdate(e) {
+    this.#t(this.enrichValues(e));
   }
-  resolveValue(e) {
-    if (typeof e == "object")
-      return e;
-    if (typeof e == "function")
-      return e(this.data);
-    this.log.error(
-      `The updater value must be a function or object. Was a ${typeof e}`,
-      { throw: !0 }
+  createStepUpdaterFnImpl(e) {
+    const { targetStep: t, updater: r, ctxData: s, fields: n = "all", debug: a } = e, u = new te({
+      debug: a,
+      prefix: (h) => `${h}:update${t}`
+    });
+    u.info(`${t} will be updated`), E(
+      be(this.value, t),
+      `[update]: The target step ${t} isn't a valid step. Please select a valid step`
+    );
+    const { [t]: S, ...g } = this.value;
+    let p = { ...this.value }, f = L(p, [t]);
+    if (s) {
+      E(
+        typeof s == "function",
+        '[update]: "ctxData" must be a function'
+      ), u.info('Custom "ctx" will be used');
+      const h = s({ ctx: g });
+      E(
+        typeof h == "object" && Object.keys(h).length > 0,
+        '[update]: "ctxData" must return an object with keys'
+      ), u.info(
+        `Custom "ctx" consists of the following keys: ${new Intl.ListFormat(
+          "en",
+          {
+            style: "long",
+            type: "conjunction"
+          }
+        ).format(Object.keys(h))}`
+      ), f = {
+        ...f,
+        ...h
+      };
+    }
+    const v = Ve(r, {
+      ctx: f,
+      update: this.createHelperFnInputUpdate([t])
+    });
+    if (u.info(`The updated data is ${JSON.stringify(v, null, 2)}`), !n) {
+      E(
+        typeof v == "object",
+        '[update]: "updater" must be an object or a function that returns an object'
+      );
+      const h = Object.keys(this.value), b = Object.keys(v);
+      E(b.length === h.length, () => {
+        const i = h.filter(
+          (d) => !b.includes(d)
+        );
+        return `[update]: "updater" is missing keys ${new Intl.ListFormat("en", {
+          style: "long",
+          type: "conjunction"
+        }).format(
+          i
+        )}`;
+      });
+      const O = V.createDeep(this.value), { mismatches: w, ok: j } = V.equalsAtPaths(
+        this.value,
+        O,
+        v
+      );
+      E(
+        j && w.length === 0,
+        `[update]: found value mismatches in ${V.printMismatches({
+          mismatches: w,
+          ok: j
+        })}`
+      ), u.info("The entire step will be updated"), p = {
+        ...p,
+        [t]: V.updateAt(p, O, v)
+      }, this.handlePostUpdate(p), u.info(`The new value is: ${JSON.stringify(p, null, 2)}`);
+      return;
+    }
+    const y = V.createDeep(S);
+    if (Array.isArray(n)) {
+      const h = M(y, n);
+      E(
+        h.status === "success",
+        `[update]: Found errors with the provided fields
+${h.status === "error" ? U(h.errors) : ""}`
+      );
+      const { mismatches: b, ok: O } = V.equalsAtPaths(
+        S,
+        n,
+        v
+      );
+      E(
+        O && b.length === 0,
+        `[update]: found value mismatches in ${V.printMismatches({
+          ok: O,
+          mismatches: b
+        })}`
+      ), u.info(
+        `The following fields will be updated: ${new Intl.ListFormat("en", {
+          type: "conjunction",
+          style: "long"
+        }).format(n)}`
+      ), p = {
+        ...p,
+        [t]: V.updateAt(S, n, v)
+      }, this.handlePostUpdate(p), u.info(`The new value is: ${JSON.stringify(p, null, 2)}`);
+      return;
+    }
+    if (typeof n == "object" && Object.keys(n).length > 0) {
+      const h = V.createDeep(n), b = M(
+        y,
+        h
+      );
+      E(
+        b.status === "success",
+        `[update]: Found errors with the provided fields
+${b.status === "error" ? U(b.errors) : ""}`
+      );
+      const { mismatches: O, ok: w } = V.equalsAtPaths(
+        S,
+        h,
+        v
+      );
+      E(
+        w && O.length === 0,
+        `[update]: found value mismatches in ${V.printMismatches({
+          ok: w,
+          mismatches: O
+        })}`
+      ), p = {
+        ...p,
+        [t]: V.updateAt(
+          S,
+          h,
+          v
+        )
+      }, u.info(
+        `The following fields will be updated: ${new Intl.ListFormat("en", {
+          type: "conjunction",
+          style: "long"
+        }).format(Object.keys(n))}`
+      ), this.handlePostUpdate(p), u.info(`The new value is: ${JSON.stringify(p, null, 2)}`);
+      return;
+    }
+    throw u.error('Unsupported value for the "fields" option'), new TypeError(
+      `[update]: property "fields" must be set to one of the following: "all", an array of deep paths to update, or an object of paths. Was ${typeof r}`,
+      { cause: r }
     );
   }
-  hasKey() {
-    return this.store.getItem(this.key) !== null;
+  createStepUpdaterFn(e) {
+    return (t) => {
+      this.createStepUpdaterFnImpl({ targetStep: e, ...t });
+    };
   }
-  get() {
-    this.throwOnEmptyStore();
-    const e = this.store.getItem(this.key);
-    if (e)
-      return JSON.parse(e);
+  update(e) {
+    return this.createStepUpdaterFnImpl(e);
   }
-  remove() {
-    this.throwOnEmptyStore(), this.store.removeItem(this.key);
+  createHelperFnInputUpdate(e) {
+    if (k.isAll(e)) {
+      const r = ae(this.value).reduce((n, a) => (n[a] = this.createStepUpdaterFn(a), n), {});
+      return Object.assign(
+        this.update,
+        r
+      );
+    }
+    const t = Object.keys(this.value);
+    if (k.isTuple(e, t)) {
+      const r = e.reduce((n, a) => (n[a] = this.createStepUpdaterFn(a), n), {});
+      return Object.assign(
+        this.update,
+        r
+      );
+    }
+    if (k.isObject(e, t)) {
+      const r = ae(e).reduce((n, a) => (n[a] = this.createStepUpdaterFn(a), n), {});
+      return Object.assign(
+        this.update,
+        r
+      );
+    }
+    throw new TypeError(`[update]: ${k.CATCH_ALL_MESSAGE}`);
   }
-  add(e) {
-    this.throwOnEmptyStore();
-    const t = JSON.stringify(this.resolveValue(e));
-    this.store.setItem(this.key, t);
+  createStepHelperFn(e) {
+    return (t, r) => {
+      const s = L(
+        this.value,
+        e
+      ), n = this.createHelperFnInputUpdate(
+        e
+      );
+      if (typeof t == "function")
+        return () => t({
+          ctx: s,
+          update: n
+        });
+      if (typeof t == "object")
+        return (a) => {
+          if ("validator" in t) {
+            E(
+              typeof a == "object",
+              "An input is expected since you provided a validator"
+            ), Se(
+              t.validator,
+              a.data
+            );
+            let u = s;
+            if (t.ctxData) {
+              const S = e[0], { [S]: g, ...p } = this.value;
+              u = {
+                ...u,
+                ...t.ctxData({ ctx: p })
+              };
+            }
+            return r({
+              ctx: u,
+              update: n,
+              ...a
+            });
+          }
+          return r({
+            ctx: s,
+            update: n
+          });
+        };
+      throw new Error(
+        `The first argument must be a function or an object, (was ${typeof t})`
+      );
+    };
+  }
+  enrichValues(e, t) {
+    let r = { ...e };
+    for (const [s, n] of Object.entries(r)) {
+      const [a] = [s], u = Number.parseInt(
+        a.replace("step", "")
+      );
+      r[a] = {
+        ...n,
+        update: this.createStepUpdaterFn(a),
+        createHelperFn: this.createStepHelperFn([a]),
+        ...t?.(u)
+      };
+    }
+    return r;
   }
 }
-const ve = [
+var Y;
+((o) => {
+  function e(t, r, s = "defaultValue") {
+    const [n, ...a] = t.split("."), u = `${n}.${s}`, S = a.length === 0 ? u : `${u}.${a.join(".")}`;
+    return V.pickBy(r, S);
+  }
+  o.resolvedDeepPath = e;
+})(Y || (Y = {}));
+var k;
+((o) => {
+  o.CATCH_ALL_MESSAGE = 'The chosen steps must either be set to on of the following: "all", an array of steps (["step1", "step2", ...]), or an object containing the steps to chose ({ step1: true, step2: true, ...})';
+  function e(s) {
+    return !!(s && typeof s == "string" && s === "all");
+  }
+  o.isAll = e;
+  function t(s, n) {
+    return Array.isArray(s) ? n ? s.every((a) => n.includes(a)) : !0 : !1;
+  }
+  o.isTuple = t;
+  function r(s, n) {
+    if (!s)
+      return !1;
+    const a = Object.keys(s);
+    return a.length === 0 || n && !a.every((u) => n.includes(u)) ? !1 : Object.entries(s).every(([u, S]) => S === !0);
+  }
+  o.isObject = r;
+})(k || (k = {}));
+const Ce = [
   "sentence",
   "title",
   "camel",
@@ -329,8 +745,8 @@ const ve = [
   "screaming-snake",
   "flat",
   "kebab"
-], P = "title";
-function ge(o, e) {
+], ne = "title";
+function Fe(o, e) {
   const t = o.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[-_]+/g, " ").trim().split(/\s+/).map((r) => r.toLowerCase());
   switch (e) {
     case "sentence":
@@ -357,13 +773,13 @@ function ge(o, e) {
       return o;
   }
 }
-function U(o) {
-  return typeof o != "string" ? !1 : ve.includes(o);
+function X(o) {
+  return typeof o != "string" ? !1 : Ce.includes(o);
 }
-function ce(o, e = P) {
-  return U(o) ? o : e;
+function ve(o, e = ne) {
+  return X(o) ? o : e;
 }
-const we = [
+const ke = [
   "string",
   "string.phone",
   "string.email",
@@ -373,11 +789,58 @@ const we = [
   "date",
   "dateTime",
   "boolean.switch"
-], Q = "string";
-function _e(o) {
-  return typeof o == "string" && we.includes(o);
+], ue = "string";
+function xe(o) {
+  return typeof o == "string" && ke.includes(o);
 }
-class le {
+const W = '"window" in undefined. No storage is available', se = "MultiStepForm";
+class Ee {
+  key;
+  store;
+  data;
+  log;
+  shouldRunActions;
+  throwWhenUndefined;
+  constructor(e) {
+    const { key: t, data: r, store: s, throwWhenUndefined: n = !1 } = e;
+    this.log = new te({
+      prefix: se
+    }), this.key = t, this.data = r, this.throwWhenUndefined = n, s ? (this.store = s, this.shouldRunActions = !0, typeof window > "u" && (this.shouldRunActions = !1, this.log.warn(W))) : typeof window < "u" ? (this.store = window.localStorage, this.shouldRunActions = !0) : (this.shouldRunActions = !1, this.log.warn(W));
+  }
+  throwOnEmptyStore() {
+    this.throwWhenUndefined && E(this.store, () => this.shouldRunActions ? W : "No storage available");
+  }
+  resolveValue(e) {
+    if (typeof e == "object")
+      return e;
+    if (typeof e == "function")
+      return e(this.data);
+    this.log.error(
+      `The updater value must be a function or object. Was a ${typeof e}`,
+      { throw: !0 }
+    );
+  }
+  hasKey() {
+    return this.store.getItem(this.key) !== null;
+  }
+  get() {
+    if (this.throwOnEmptyStore(), !this.shouldRunActions)
+      return;
+    const e = this.store.getItem(this.key);
+    if (e)
+      return JSON.parse(e);
+  }
+  remove() {
+    this.throwOnEmptyStore(), this.shouldRunActions && this.store.removeItem(this.key);
+  }
+  add(e) {
+    if (this.throwOnEmptyStore(), !this.shouldRunActions)
+      return;
+    const t = JSON.stringify(this.resolveValue(e));
+    this.store.setItem(this.key, t);
+  }
+}
+class _e {
   listeners = /* @__PURE__ */ new Set();
   constructor() {
     this.subscribe = this.subscribe.bind(this);
@@ -395,13 +858,13 @@ class le {
   onUnsubscribe() {
   }
 }
-const $e = [
+const Le = [
   "string",
   "number",
   "array.string",
   "array.string.untyped"
-], fe = /^step\d+$/i;
-function X(o, e) {
+], we = /^step\d+$/i;
+function ce(o, e) {
   if (typeof o != "object" || o === null) return !1;
   for (const t of Object.keys(e)) {
     if (!(t in o)) return !1;
@@ -410,130 +873,130 @@ function X(o, e) {
   }
   return !0;
 }
-function ee(o, e, t) {
-  return o ?? ge(e, t);
+function le(o, e, t) {
+  return o ?? Fe(e, t);
 }
-function Te(o) {
+function Ne(o) {
   const e = {}, { fields: t, defaultCasing: r, validateFields: s } = o;
   for (const [n, a] of Object.entries(t)) {
-    d(
+    E(
       typeof n == "string",
       `Each key for the "fields" option must be a string. Key ${n} was a ${typeof n}`
-    ), d(
+    ), E(
       typeof a == "object",
       `The value for key ${n} must be an object. Was ${typeof a}`
     );
     const {
-      defaultValue: c,
-      label: y,
-      nameTransformCasing: p,
-      type: l = Q
+      defaultValue: u,
+      label: S,
+      nameTransformCasing: g,
+      type: p = ue
     } = a;
     if (s)
-      e[n] = c;
+      e[n] = u;
     else {
-      const u = p ?? r;
+      const f = g ?? r;
       e[n] = {
         ...e[n],
-        nameTransformCasing: u,
-        type: l,
-        defaultValue: c,
-        label: ee(y, n, u)
+        nameTransformCasing: f,
+        type: p,
+        defaultValue: u,
+        label: le(S, n, f)
         // TODO add more fields here
       };
     }
   }
   if (s) {
-    const n = G(
+    const n = Se(
       s,
       e
     );
-    d(
+    E(
       typeof n == "object",
       `The result of the validated fields must be an object, was (${typeof n}). This is probably an internal error, so open up an issue about it`
-    ), d(
+    ), E(
       !!n,
       "The result of the validated fields must be defined. This is probably an internal error, so open up an issue about it"
     );
-    for (const [a, c] of Object.entries(n)) {
-      const y = t[a];
-      d(
-        y,
+    for (const [a, u] of Object.entries(n)) {
+      const S = t[a];
+      E(
+        S,
         `No field found in the fields config for "${a}"`
       );
       const {
-        label: p,
-        type: l = Q,
-        nameTransformCasing: u
-      } = y, f = u ?? r;
+        label: g,
+        type: p = ue,
+        nameTransformCasing: f
+      } = S, v = f ?? r;
       e[a] = {
         ...e[a],
-        nameTransformCasing: f,
-        type: l,
-        defaultValue: c,
-        label: ee(p, a, f)
+        nameTransformCasing: v,
+        type: p,
+        defaultValue: u,
+        label: le(g, a, v)
       };
     }
   }
   return e;
 }
-function pe(o) {
+function Oe(o) {
   const e = {};
-  d(!!o, "The steps config must be defined", TypeError), d(
+  E(!!o, "The steps config must be defined", TypeError), E(
     typeof o == "object",
     `The steps config must be an object, was (${typeof o})`,
     TypeError
   );
   for (const [t, r] of Object.entries(o)) {
-    d(
+    E(
       typeof t == "string",
       `Each key for the step config must be a string. Key "${t}" was ${typeof t} `,
       TypeError
-    ), d(
-      fe.test(t),
+    ), E(
+      we.test(t),
       `The key "${t}" isn't formatted properly. Each key in the step config must be the following format: "step{number}"`
     );
     const s = t, {
       fields: n,
       title: a,
-      nameTransformCasing: c = P,
-      description: y,
-      validateFields: p
-    } = r, l = s.toString().replace("step", "");
-    d(
+      nameTransformCasing: u = ne,
+      description: S,
+      validateFields: g
+    } = r, p = s.toString().replace("step", "");
+    E(
       n,
-      `Missing fields for step ${l} (${String(s)})`,
+      `Missing fields for step ${p} (${String(s)})`,
       TypeError
-    ), d(
+    ), E(
       typeof n == "object",
       "Fields must be an object",
       TypeError
-    ), d(
+    ), E(
       Object.keys(n).length > 0,
-      `The fields config for step ${l} (${String(
+      `The fields config for step ${p} (${String(
         s
       )}) is empty. Please add a field`
-    ), d(
+    ), E(
       typeof n == "object",
       `The "fields" property must be an object. Was ${typeof n}`
     );
-    const u = Te({
-      defaultCasing: c,
+    const f = Ne({
+      defaultCasing: u,
       fields: n,
-      validateFields: p
+      validateFields: g
     });
     e[s] = {
       ...e[s],
       title: a,
-      nameTransformCasing: c,
+      nameTransformCasing: u,
       // Only add the description if it's defined
-      ...typeof y == "string" ? { description: y } : {},
-      fields: u
+      ...typeof S == "string" ? { description: S } : {},
+      fields: f
     };
   }
   return e;
 }
-class B extends le {
+let oe = class extends _e {
   /**
    * The original config before any validation or transformations have been applied.
    */
@@ -549,23 +1012,28 @@ class B extends le {
   lastStep;
   stepNumbers;
   storage;
+  #e;
   constructor(e) {
     super();
     const { steps: t, nameTransformCasing: r, storage: s } = e;
-    this.defaultNameTransformationCasing = ce(
+    this.defaultNameTransformationCasing = ve(
       r
-    ), this.original = t, this.value = this.enrichValues(pe(this.original)), this.stepNumbers = Object.keys(this.value).map(
-      (n) => Number.parseInt(n.replace("step", ""))
-    ), this.storage = new ue({
+    ), this.original = t, this.value = Oe(this.original), this.storage = new Ee({
       data: this.value,
-      key: s?.key ?? K,
-      store: s?.store
-    }), this.firstStep = this.first(), this.lastStep = this.last(), this.steps = {
+      key: s?.key ?? se,
+      store: s?.store,
+      throwWhenUndefined: s?.throwWhenUndefined ?? !1
+    }), this.#e = new re({
+      getValue: () => this.value,
+      setValue: (n) => this.handlePostUpdate(n)
+    }), this.value = this.#e.enrichValues(this.value), this.stepNumbers = Object.keys(this.value).map(
+      (n) => Number.parseInt(n.replace("step", ""))
+    ), this.firstStep = this.first(), this.lastStep = this.last(), this.steps = {
       first: this.firstStep.step,
       last: this.lastStep.step,
       value: this.stepNumbers,
       as: (n) => {
-        if (d(
+        if (E(
           typeof n == "string",
           `The type of the target transformation type must be a string, was ${typeof n}`
         ), n === "string")
@@ -575,18 +1043,34 @@ class B extends le {
         if (n.includes("array.string"))
           return this.stepNumbers.map((a) => `${a}`);
         throw new Error(
-          `Transformation type "${n}" is not supported. Available transformations include: ${$e.map(
+          `Transformation type "${n}" is not supported. Available transformations include: ${Le.map(
             (a) => `"${a}"`
           ).join(", ")}`
         );
       },
       isValidStepNumber: (n) => this.stepNumbers.includes(n),
-      isValidStepKey: (n) => Object.keys(this.value).includes(n)
-    };
+      isValidStepKey: (n) => be(this.value, n)
+    }, this.sync();
+  }
+  /**
+   * @internal
+   */
+  __getStorage() {
+    return this.storage;
   }
   getSnapshot() {
     return this;
   }
+  /**
+   * Syncs the values from storage to {@linkcode value}.
+   */
+  sync() {
+    const e = this.__getStorage().get();
+    if (e) {
+      const t = this.#e.enrichValues(e);
+      this.value = { ...t };
+    }
+  }
   notify() {
     for (const e of this.listeners)
       e({
@@ -596,28 +1080,13 @@ class B extends le {
         value: this.value
       });
   }
-  enrichValues(e, t) {
-    for (const [r, s] of Object.entries(e)) {
-      const n = Number.parseInt(r.replace("step", ""));
-      e = {
-        ...e,
-        [r]: {
-          ...s,
-          update: this.createStepUpdaterFn(n),
-          createHelperFn: this.createStepHelperFn(n),
-          ...t?.(n)
-        }
-      };
-    }
-    return e;
-  }
   /**
    * Gets the data for a specific step.
    * @param options The options for getting the step data.
    * @returns The step data for the target step.
    */
   get(e) {
-    return j(this.value)(e);
+    return ee(this.value)(e);
   }
   /**
    * Gets the data for the first step.
@@ -635,121 +1104,23 @@ class B extends le {
     const e = Math.max(...this.stepNumbers);
     return this.get({ step: e });
   }
-  handlePostUpdate() {
-    this.storage.add(this.value), this.notify();
+  handlePostUpdate(e) {
+    this.value = { ...e }, this.__getStorage().add(this.value), this.sync(), this.notify();
   }
-  createStepUpdaterFnImpl(e, t, r) {
-    const s = this.stepNumbers;
-    d(
-      typeof e == "number",
-      `Type of step must be a number, was ${typeof e}`,
-      TypeError
-    ), d(
-      s.includes(e),
-      `The target step ${e} is not valid. Valid steps include "${s.join(
-        ", "
-      )}"`
-    );
-    const n = `step${e}`;
-    if (typeof t == "string") {
-      d(this.value[n], `No data found for step ${e}`), d(
-        typeof this.value[n] == "object",
-        `The values for step ${e} is not an object, was ${typeof this.value[n]}`
-      ), d(
-        t in this.value[n],
-        `The field ${t} is not a valid field. Valid fields include ${Object.keys(
-          this.value[n]
-        ).join(", ")}`
-      ), d(
-        typeof r == "object" || typeof r == "function",
-        () => {
-          let a = "";
-          return typeof r != "object" && (a = "an object"), typeof r != "function" && (a = "a function"), `[${String(
-            n
-          )}-${t}]: The updater must be ${a}, was "${typeof r}"`;
-        },
-        TypeError
-      ), this.value = {
-        ...this.value,
-        [n]: {
-          ...this.value[n],
-          [t]: Y(
-            r,
-            this.value[n][t]
-          )
-        }
-      }, this.handlePostUpdate();
-      return;
-    }
-    if (typeof t == "object" || typeof t == "function") {
-      const a = Y(
-        t,
-        this.value[n]
-      );
-      d(
-        typeof a == "object",
-        `The updated data must be an object, was ${typeof a}`
-      ), this.value = {
-        ...this.value,
-        [n]: {
-          ...this.value[n],
-          ...a
-        }
-      }, this.handlePostUpdate();
-      return;
-    }
-    throw new TypeError(
-      `The second parameter must be one of the following: a specific field to update (string), an object with the updated data, or a function that returns the updated data. It was ${typeof t}`,
-      { cause: t }
-    );
-  }
-  createStepUpdaterFn(e) {
-    return (t, r) => {
-      this.createStepUpdaterFnImpl(
-        e,
-        t,
-        r
-      );
-    };
-  }
-  update(e, t, r) {
-    this.createStepUpdaterFnImpl(e, t, r);
-  }
-  createStepHelperFnImpl(e) {
-    return (t, r) => {
-      const s = R(
-        this.value,
-        e
-      );
-      if (typeof t == "function")
-        return () => t({ ctx: s });
-      if (typeof t == "object")
-        return (n) => "validator" in t ? (d(
-          typeof n == "object",
-          "An input is expected since you provided a validator"
-        ), G(
-          t.validator,
-          n.data
-        ), r({ ctx: s, ...n })) : r({ ctx: s });
-      throw new Error(
-        `The first argument must be a function or an object, (was ${typeof t})`
-      );
-    };
-  }
-  createStepHelperFn(e) {
-    return this.createStepHelperFnImpl([`step${e}`]);
+  update(e) {
+    this.#e.update(e);
   }
   // Implementation
   createHelperFn(e, t) {
     const { stepData: r, ...s } = e;
-    return this.createStepHelperFnImpl(r)(s, t);
+    return this.#e.createStepHelperFn(r)(s, t);
   }
   /**
    * Validates that a given object is the proper shape for step data.
    * @param value
    */
   static hasData(e, t) {
-    return e === null || typeof e != "object" ? !1 : X(e, {
+    return e === null || typeof e != "object" ? !1 : ce(e, {
       title: (r) => typeof r == "string",
       fields: (r) => {
         if (r === null || typeof r != "object")
@@ -758,25 +1129,41 @@ class B extends le {
           if (typeof s != "string" || !(s in r))
             return !1;
           const n = r[s];
-          if (n === null || typeof n != "object" || !X(n, {
-            defaultValue: (a) => a !== "undefined" && a !== null,
-            label: (a) => typeof a == "string" || typeof a == "boolean" && !a,
-            nameTransformCasing: U,
-            type: _e
+          if (n === null || typeof n != "object" || !ce(n, {
+            defaultValue: (u) => u !== "undefined" && u !== null,
+            label: (u) => typeof u == "string" || typeof u == "boolean" && !u,
+            nameTransformCasing: X,
+            type: xe
           }))
             return !1;
         }
         return !0;
       },
       createHelperFn: (r) => typeof r == "function",
-      update: (r) => typeof r == "function",
-      nameTransformCasing: U,
+      // update: (v): v is GetCurrentStep<resolvedStep, stepNumbers>['update'] =>
+      //   typeof v === 'function',
+      nameTransformCasing: X,
       ...t?.optionalKeysToCheck
     });
   }
-}
-class Ee extends le {
-  stepHelper;
+  /**
+   * Gets the value of a given field for a given step.
+   * @param step The step to get the value from.
+   * @param field The field to get the value from.
+   * @returns The value of the {@linkcode field}.
+   */
+  getValue(e, t) {
+    const r = this.value[e], s = `Unable to get the value for "${String(
+      e
+    )}.fields.${String(t)}"`;
+    E("fields" in r, s), E(
+      typeof r.fields == "object",
+      `${s} because "fields" is not an object. This shouldn't be the case, so please open an issue`
+    );
+    const n = r.fields;
+    return Y.resolvedDeepPath(t, n);
+  }
+}, De = class extends _e {
   defaultNameTransformationCasing;
   stepSchema;
   storage;
@@ -784,18 +1171,16 @@ class Ee extends le {
   constructor(e) {
     super();
     const { steps: t, nameTransformCasing: r, storage: s } = e;
-    this.defaultNameTransformationCasing = ce(
+    this.defaultNameTransformationCasing = ve(
       r
-    ), this.stepSchema = new B({
+    ), this.stepSchema = new oe({
       steps: t,
       nameTransformCasing: this.defaultNameTransformationCasing
-    }), this.stepHelper = new be(
-      this.stepSchema.value,
-      this.stepSchema.steps.value
-    ), this.storage = new ue({
-      key: s?.key ?? K,
+    }), this.storage = new Ee({
+      key: s?.key ?? se,
       data: this.stepSchema.value,
-      store: s?.store
+      store: s?.store,
+      throwWhenUndefined: s?.throwWhenUndefined ?? !1
     }), this.stepSchema.subscribe(() => {
       this.notify();
     });
@@ -829,15 +1214,14 @@ class Ee extends le {
         steps: this.stepSchema.original
       });
   }
+};
+function Ie(o) {
+  return (t) => {
+    const { children: r, name: s } = t, n = o(s);
+    return r(n);
+  };
 }
-function Oe(o) {
-  function e(t) {
-    const { children: r, name: s } = t;
-    return r(o(s));
-  }
-  return e;
-}
-var O;
+var x;
 ((o) => {
   o.DEFAULT_FORM_ALIAS = "Form";
   function e(r, s) {
@@ -855,21 +1239,21 @@ var O;
   }
   o.isFormAvailable = e;
   function t(r) {
-    return (s) => /* @__PURE__ */ me("form", { id: r, ...s });
+    return (s) => /* @__PURE__ */ Te("form", { id: r, ...s });
   }
   o.createDefaultForm = t;
-})(O || (O = {}));
-var H;
+})(x || (x = {}));
+var Z;
 ((o) => {
   o.DEFAULT_FORM_INSTANCE_ALIAS = "form";
-})(H || (H = {}));
-function je(o, e) {
-  d(
+})(Z || (Z = {}));
+function Me(o, e) {
+  E(
     e in o,
     `The target step ${e} is not a valid step key`
   );
   const t = o[e];
-  d("fields" in t, `No "fields" were found for ${e}`);
+  E("fields" in t, `No "fields" were found for ${e}`);
   let r = {};
   for (const [s, n] of Object.entries(
     t.fields
@@ -880,21 +1264,26 @@ function je(o, e) {
     };
   return r;
 }
-class Ce extends B {
+class Ue extends oe {
   // @ts-ignore type doesn't match `MultiStepFormSchemaBase.value`
   value;
+  #e;
   constructor(e) {
     const { form: t, ...r } = e;
-    super(r), this.value = this.enrichValues(pe(this.original)), this.value = this.enrichValues(this.value, (s) => {
-      const n = `step${s}`, a = t?.id ?? n;
+    super(r), this.value = Oe(this.original), this.#e = new re({
+      getValue: () => this.value,
+      setValue: (s) => this.handlePostUpdate(s)
+    }), this.sync(), this.value = this.#e.enrichValues(this.value, (s) => {
+      const n = `step${s}`, a = [n], u = t?.id ?? n, S = L(this.value, a);
       return {
-        createComponent: this.createComponentForStep(
-          [`step${s}`],
+        createComponent: this.createStepSpecificComponentFactory(
+          a,
           {
             isStepSpecific: !0,
-            defaultId: a,
+            defaultId: u,
             form: t
-          }
+          },
+          S
         )
       };
     });
@@ -902,113 +1291,108 @@ class Ce extends B {
   createFormComponent(e, t) {
     const { render: r, enabledForSteps: s = "all", id: n = t } = e, a = {
       id: n,
-      steps: R(this.value, s)
+      steps: L(this.value, s)
     };
-    return (c) => r(a, c);
+    return (u) => r(a, u);
   }
   createStepSpecificComponentImpl(e, t, r, s = {}) {
     return (n) => ((a) => {
-      const c = {};
-      for (const [l, u] of Object.entries(s))
-        if (typeof u == "function")
+      const u = {};
+      for (const [w, j] of Object.entries(s))
+        if (typeof j == "function")
           try {
-            const f = u();
-            c[l] = f, typeof console < "u" && console.debug && console.debug(
-              `[multi-step-form] Hook "${l}" called successfully`,
-              { result: f !== void 0 ? "defined" : "undefined" }
-            );
-          } catch (f) {
-            const i = f instanceof Error ? f.message : String(f);
+            const i = j();
+            u[w] = i;
+          } catch (i) {
+            const l = i instanceof Error ? i.message : String(i);
             throw new Error(
-              `[multi-step-form] Error calling hook "${l}" in useFormInstance.render: ${i}
+              `[multi-step-form] Error calling hook "${w}" in useFormInstance.render: ${l}
 
 This usually means:
 1. The hook is being called outside of a React component
 2. The hook has invalid dependencies or configuration
 3. There's an error in your hook implementation
 
-Original error: ${i}`,
-              { cause: f }
+Original error: ${l}`,
+              { cause: i }
             );
           }
         else
-          c[l] = u;
-      const { defaultId: y, form: p } = t;
-      if (p) {
-        const {
-          alias: l = O.DEFAULT_FORM_ALIAS,
-          ...u
-        } = p, f = u.enabledForSteps ?? "all", [i] = e;
-        d(
-          this.steps.isValidStepKey(i),
-          `[createComponent]: the target step ${i} is invalid. Note, this error shouldn't appear as the target step should always be valid. If you see this error, please open an issue.`
-        );
-        const m = Number.parseInt(i.replace("step", ""));
-        d(
-          !Number.isNaN(m),
-          `[${i}:"createComponent"]: an error occurred while extracting the number`
-        );
-        const h = this.value[i];
-        d(
-          "fields" in h,
-          `[${i}:createComponent]: unable to find the "fields" for the current step`
-        ), d(
-          typeof h.fields == "object",
-          `[${i}:createComponent]: the "fields" property must be an object, was ${typeof h.fields}`
+          u[w] = j;
+      const { defaultId: S, form: g } = t, { ctx: p } = r, [f] = e;
+      E(
+        this.steps.isValidStepKey(f),
+        `[createComponent]: the target step ${f} is invalid. Note, this error shouldn't appear as the target step should always be valid. If you see this error, please open an issue.`
+      );
+      const v = Number.parseInt(f.replace("step", ""));
+      E(
+        !Number.isNaN(v),
+        `[${f}:"createComponent"]: an error occurred while extracting the number`
+      );
+      const y = this.value[f];
+      E(
+        "fields" in y,
+        `[${f}:createComponent]: unable to find the "fields" for the current step`
+      ), E(
+        typeof y.fields == "object",
+        `[${f}:createComponent]: the "fields" property must be an object, was ${typeof y.fields}`
+      );
+      const h = this.#e.createStepUpdaterFn(f), b = Ie((w) => {
+        E(typeof w == "string", () => {
+          const c = new Intl.ListFormat("en", {
+            style: "long",
+            type: "disjunction"
+          });
+          return `[${f}:Field]: the "name" prop must be a string and a valid field for ${f}. Available fields include ${c.format(
+            Object.keys(y.fields)
+          )}`;
+        }), E(
+          w in y.fields,
+          `[${f}:Field]: the field "${w}" doesn't exist for the current step`
+        ), E(
+          "update" in y,
+          `[${f}:Field]: No "update" function was found`
         );
-        const b = Oe((g) => {
-          d(typeof g == "string", () => {
-            const L = new Intl.ListFormat("en", {
-              style: "long",
-              type: "disjunction"
+        const j = this.getValue(f, w), { label: i, nameTransformCasing: l, type: d } = y.fields[w];
+        return {
+          defaultValue: j,
+          label: i,
+          nameTransformCasing: l,
+          type: d,
+          name: w,
+          onInputChange: (c) => {
+            const m = typeof c == "function" ? c(j) : c;
+            this.update({
+              targetStep: f,
+              updater: m,
+              fields: [`fields.${w}.defaultValue`]
             });
-            return `[${i}:Field]: the "name" prop must be a string and a valid field for ${i}. Available fields include ${L.format(
-              Object.keys(h.fields)
-            )}`;
-          }), d(
-            g in h.fields,
-            `[${i}:Field]: the field "${g}" doesn't exist for the current step`
-          );
-          const { fields: _, update: $ } = h, { defaultValue: T, label: S, nameTransformCasing: w, type: E } = _[g];
-          return {
-            defaultValue: T,
-            label: S,
-            nameTransformCasing: w,
-            type: E,
-            name: g,
-            onInputChange: (L) => (
-              // TODO remove type assertions
-              $(
-                "fields",
-                (z) => ({
-                  ...z,
-                  [g]: {
-                    ...z[g],
-                    defaultValue: L
-                  }
-                })
-              )
-            )
-          };
-        });
-        let v = {
-          ctx: r,
-          onInputChange: this.createStepUpdaterFn(m),
-          Field: b,
-          ...c
+          }
         };
-        return O.isFormAvailable(
+      });
+      let O = {
+        ctx: p,
+        onInputChange: h,
+        Field: b,
+        ...u
+      };
+      if (g) {
+        const {
+          alias: w = x.DEFAULT_FORM_ALIAS,
+          ...j
+        } = g, i = j.enabledForSteps ?? "all";
+        return x.isFormAvailable(
           e,
-          f
-        ) && (v = {
-          ...v,
-          [l]: this.createFormComponent(u, y)
-        }), n(v, a);
+          i
+        ) && (O = {
+          ...O,
+          [w]: this.createFormComponent(j, S)
+        }), n(O, a);
       }
       return n(
         {
-          ctx: r,
-          [O.DEFAULT_FORM_ALIAS]: O.createDefaultForm(y)
+          ...O,
+          [x.DEFAULT_FORM_ALIAS]: x.createDefaultForm(S)
         },
         a
       );
@@ -1016,51 +1400,76 @@ Original error: ${i}`,
   }
   createStepSpecificComponentFactory(e, t, r) {
     const s = this.createStepSpecificComponentImpl.bind(this), n = this.createDefaultValues.bind(this);
-    function a(c, y) {
-      function p() {
-        return d(
-          typeof c == "function",
+    debugger;
+    const a = this.value, u = e[0], S = this.#e.createStepUpdaterFn(u).bind(this.#e);
+    function g(p, f) {
+      function v(h) {
+        return h ? { ctx: { ...r, ...h } } : { ctx: r };
+      }
+      function y() {
+        return E(
+          typeof p == "function",
           "The first argument must be a function"
         ), s(
           e,
           t,
-          r
-        )(c);
+          v(void 0)
+        )(p);
       }
-      if (typeof c == "object") {
-        const { useFormInstance: l } = c;
-        if (l) {
+      if (typeof p == "object") {
+        const { useFormInstance: h, ctxData: b, debug: O } = p, w = new te({
+          debug: O,
+          prefix(l) {
+            return `${l}-${u}-createComponent`;
+          }
+        });
+        w.info("First argument is an object");
+        const { [u]: j, ...i } = a;
+        if (E(
+          typeof f == "function",
+          "The second argument must be a function"
+        ), h) {
           const {
-            render: u,
-            alias: f = H.DEFAULT_FORM_INSTANCE_ALIAS
-          } = l;
-          d(
-            typeof y == "function",
-            "The second argument must be a function"
+            render: l,
+            alias: d = Z.DEFAULT_FORM_INSTANCE_ALIAS
+          } = h, [c] = e, m = n(c), _ = b ? {
+            ...r,
+            ...b({ ctx: i })
+          } : r, $ = { ctx: _, defaultValues: m };
+          return s(
+            e,
+            t,
+            _,
+            {
+              [d]: () => l($)
+            }
+          )(f);
+        }
+        if (b) {
+          w.info('Option "ctxData" is defined'), E(
+            typeof b == "function",
+            'Option "ctxData" must be a function'
           );
-          const [i] = e, m = n(i), h = { ctx: r, defaultValues: m };
-          return s(e, t, r, {
-            [f]: () => u(h)
-          })(y);
+          const l = b({ ctx: i });
+          w.info(
+            `Addition context is: ${JSON.stringify(l, null, 2)}`
+          );
+          const d = {
+            ...r,
+            ...l
+          };
+          return w.info(
+            `Resolved context is: ${JSON.stringify(d, null, 2)}`
+          ), s(e, t, {
+            ctx: d,
+            update: S
+          })(f);
         }
-        return p();
+        return y();
       }
-      return p();
+      return y();
     }
-    return a;
-  }
-  createComponentImpl(e, t) {
-    const r = R(
-      this.value,
-      e
-    );
-    return t.isStepSpecific ? this.createStepSpecificComponentFactory(e, t, r) : (s) => ((n) => s(
-      { ctx: r },
-      n
-    ));
-  }
-  createComponentForStep(e, t) {
-    return this.createComponentImpl(e, t);
+    return g;
   }
   /**
    * A helper function to create a component for a specific step.
@@ -1070,38 +1479,47 @@ Original error: ${i}`,
    * @returns The created component for the step.
    */
   createComponent(e, t) {
-    return this.createComponentImpl(e.stepData, {
-      isStepSpecific: !1
-    })(t);
+    const { stepData: r } = e, s = L(
+      this.value,
+      r
+    );
+    return ((n) => t(s, n));
   }
   createDefaultValues(e) {
-    return je(this.value, e);
+    return Me(this.value, e);
   }
 }
-class Ae extends Ee {
+class Re extends De {
+  // @ts-ignore
   stepSchema;
+  #e;
   constructor(e) {
-    const { nameTransformCasing: t = P, storage: r, ...s } = e;
-    super({
-      nameTransformCasing: t,
-      storage: r,
-      ...s
-    }), this.stepSchema = new Ce({
-      nameTransformCasing: t,
-      ...s
+    const { nameTransformCasing: t = ne, storage: r, ...s } = e, n = { nameTransformCasing: t, storage: r, ...s };
+    super(n), this.stepSchema = new Ue(n), this.#e = new re({
+      getValue: () => this.stepSchema.value,
+      setValue: (a) => {
+        this.stepSchema.value = { ...a }, this.storage.add(a), this.notify();
+      }
     });
   }
   createComponent(e, t) {
-    const { stepData: r } = e, s = this.stepHelper.createCtx(
+    const { stepData: r } = e, s = L(
+      this.stepSchema.value,
       r
     );
-    return ((n) => t({ ctx: s }, n));
+    return ((n) => t(
+      {
+        ctx: s,
+        update: this.#e.createHelperFnInputUpdate(r)
+      },
+      n
+    ));
   }
 }
-function Me(o) {
-  return new Ae(o);
+function Xe(o) {
+  return new Re(o);
 }
-var A = { exports: {} }, x = {}, N = { exports: {} }, D = {};
+var D = { exports: {} }, H = {}, I = { exports: {} }, B = {};
 /**
  * @license React
  * use-sync-external-store-shim.production.js
@@ -1111,48 +1529,48 @@ var A = { exports: {} }, x = {}, N = { exports: {} }, D = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var te;
-function Ne() {
-  if (te) return D;
-  te = 1;
-  var o = I;
-  function e(u, f) {
-    return u === f && (u !== 0 || 1 / u === 1 / f) || u !== u && f !== f;
+var fe;
+function Pe() {
+  if (fe) return B;
+  fe = 1;
+  var o = R;
+  function e(f, v) {
+    return f === v && (f !== 0 || 1 / f === 1 / v) || f !== f && v !== v;
   }
   var t = typeof Object.is == "function" ? Object.is : e, r = o.useState, s = o.useEffect, n = o.useLayoutEffect, a = o.useDebugValue;
-  function c(u, f) {
-    var i = f(), m = r({ inst: { value: i, getSnapshot: f } }), h = m[0].inst, b = m[1];
+  function u(f, v) {
+    var y = v(), h = r({ inst: { value: y, getSnapshot: v } }), b = h[0].inst, O = h[1];
     return n(
       function() {
-        h.value = i, h.getSnapshot = f, y(h) && b({ inst: h });
+        b.value = y, b.getSnapshot = v, S(b) && O({ inst: b });
       },
-      [u, i, f]
+      [f, y, v]
     ), s(
       function() {
-        return y(h) && b({ inst: h }), u(function() {
-          y(h) && b({ inst: h });
+        return S(b) && O({ inst: b }), f(function() {
+          S(b) && O({ inst: b });
         });
       },
-      [u]
-    ), a(i), i;
+      [f]
+    ), a(y), y;
   }
-  function y(u) {
-    var f = u.getSnapshot;
-    u = u.value;
+  function S(f) {
+    var v = f.getSnapshot;
+    f = f.value;
     try {
-      var i = f();
-      return !t(u, i);
+      var y = v();
+      return !t(f, y);
     } catch {
       return !0;
     }
   }
-  function p(u, f) {
-    return f();
+  function g(f, v) {
+    return v();
   }
-  var l = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? p : c;
-  return D.useSyncExternalStore = o.useSyncExternalStore !== void 0 ? o.useSyncExternalStore : l, D;
+  var p = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? g : u;
+  return B.useSyncExternalStore = o.useSyncExternalStore !== void 0 ? o.useSyncExternalStore : p, B;
 }
-var k = {};
+var J = {};
 /**
  * @license React
  * use-sync-external-store-shim.development.js
@@ -1162,62 +1580,62 @@ var k = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var re;
-function Ve() {
-  return re || (re = 1, process.env.NODE_ENV !== "production" && (function() {
-    function o(i, m) {
-      return i === m && (i !== 0 || 1 / i === 1 / m) || i !== i && m !== m;
+var pe;
+function Ke() {
+  return pe || (pe = 1, process.env.NODE_ENV !== "production" && (function() {
+    function o(y, h) {
+      return y === h && (y !== 0 || 1 / y === 1 / h) || y !== y && h !== h;
     }
-    function e(i, m) {
-      l || s.startTransition === void 0 || (l = !0, console.error(
+    function e(y, h) {
+      p || s.startTransition === void 0 || (p = !0, console.error(
         "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
       ));
-      var h = m();
-      if (!u) {
-        var b = m();
-        n(h, b) || (console.error(
+      var b = h();
+      if (!f) {
+        var O = h();
+        n(b, O) || (console.error(
           "The result of getSnapshot should be cached to avoid an infinite loop"
-        ), u = !0);
+        ), f = !0);
       }
-      b = a({
-        inst: { value: h, getSnapshot: m }
+      O = a({
+        inst: { value: b, getSnapshot: h }
       });
-      var v = b[0].inst, g = b[1];
-      return y(
+      var w = O[0].inst, j = O[1];
+      return S(
         function() {
-          v.value = h, v.getSnapshot = m, t(v) && g({ inst: v });
+          w.value = b, w.getSnapshot = h, t(w) && j({ inst: w });
         },
-        [i, h, m]
-      ), c(
+        [y, b, h]
+      ), u(
         function() {
-          return t(v) && g({ inst: v }), i(function() {
-            t(v) && g({ inst: v });
+          return t(w) && j({ inst: w }), y(function() {
+            t(w) && j({ inst: w });
           });
         },
-        [i]
-      ), p(h), h;
+        [y]
+      ), g(b), b;
     }
-    function t(i) {
-      var m = i.getSnapshot;
-      i = i.value;
+    function t(y) {
+      var h = y.getSnapshot;
+      y = y.value;
       try {
-        var h = m();
-        return !n(i, h);
+        var b = h();
+        return !n(y, b);
       } catch {
         return !0;
       }
     }
-    function r(i, m) {
-      return m();
+    function r(y, h) {
+      return h();
     }
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-    var s = I, n = typeof Object.is == "function" ? Object.is : o, a = s.useState, c = s.useEffect, y = s.useLayoutEffect, p = s.useDebugValue, l = !1, u = !1, f = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? r : e;
-    k.useSyncExternalStore = s.useSyncExternalStore !== void 0 ? s.useSyncExternalStore : f, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-  })()), k;
+    var s = R, n = typeof Object.is == "function" ? Object.is : o, a = s.useState, u = s.useEffect, S = s.useLayoutEffect, g = s.useDebugValue, p = !1, f = !1, v = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? r : e;
+    J.useSyncExternalStore = s.useSyncExternalStore !== void 0 ? s.useSyncExternalStore : v, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+  })()), J;
 }
-var ne;
-function de() {
-  return ne || (ne = 1, process.env.NODE_ENV === "production" ? N.exports = Ne() : N.exports = Ve()), N.exports;
+var de;
+function $e() {
+  return de || (de = 1, process.env.NODE_ENV === "production" ? I.exports = Pe() : I.exports = Ke()), I.exports;
 }
 /**
  * @license React
@@ -1228,58 +1646,58 @@ function de() {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var se;
-function Fe() {
-  if (se) return x;
-  se = 1;
-  var o = I, e = de();
-  function t(p, l) {
-    return p === l && (p !== 0 || 1 / p === 1 / l) || p !== p && l !== l;
-  }
-  var r = typeof Object.is == "function" ? Object.is : t, s = e.useSyncExternalStore, n = o.useRef, a = o.useEffect, c = o.useMemo, y = o.useDebugValue;
-  return x.useSyncExternalStoreWithSelector = function(p, l, u, f, i) {
-    var m = n(null);
-    if (m.current === null) {
-      var h = { hasValue: !1, value: null };
-      m.current = h;
-    } else h = m.current;
-    m = c(
+var he;
+function Ge() {
+  if (he) return H;
+  he = 1;
+  var o = R, e = $e();
+  function t(g, p) {
+    return g === p && (g !== 0 || 1 / g === 1 / p) || g !== g && p !== p;
+  }
+  var r = typeof Object.is == "function" ? Object.is : t, s = e.useSyncExternalStore, n = o.useRef, a = o.useEffect, u = o.useMemo, S = o.useDebugValue;
+  return H.useSyncExternalStoreWithSelector = function(g, p, f, v, y) {
+    var h = n(null);
+    if (h.current === null) {
+      var b = { hasValue: !1, value: null };
+      h.current = b;
+    } else b = h.current;
+    h = u(
       function() {
-        function v(S) {
-          if (!g) {
-            if (g = !0, _ = S, S = f(S), i !== void 0 && h.hasValue) {
-              var w = h.value;
-              if (i(w, S))
-                return $ = w;
+        function w(c) {
+          if (!j) {
+            if (j = !0, i = c, c = v(c), y !== void 0 && b.hasValue) {
+              var m = b.value;
+              if (y(m, c))
+                return l = m;
             }
-            return $ = S;
+            return l = c;
           }
-          if (w = $, r(_, S)) return w;
-          var E = f(S);
-          return i !== void 0 && i(w, E) ? (_ = S, w) : (_ = S, $ = E);
+          if (m = l, r(i, c)) return m;
+          var _ = v(c);
+          return y !== void 0 && y(m, _) ? (i = c, m) : (i = c, l = _);
         }
-        var g = !1, _, $, T = u === void 0 ? null : u;
+        var j = !1, i, l, d = f === void 0 ? null : f;
         return [
           function() {
-            return v(l());
+            return w(p());
           },
-          T === null ? void 0 : function() {
-            return v(T());
+          d === null ? void 0 : function() {
+            return w(d());
           }
         ];
       },
-      [l, u, f, i]
+      [p, f, v, y]
     );
-    var b = s(p, m[0], m[1]);
+    var O = s(g, h[0], h[1]);
     return a(
       function() {
-        h.hasValue = !0, h.value = b;
+        b.hasValue = !0, b.value = O;
       },
-      [b]
-    ), y(b), b;
-  }, x;
+      [O]
+    ), S(O), O;
+  }, H;
 }
-var M = {};
+var z = {};
 /**
  * @license React
  * use-sync-external-store-shim/with-selector.development.js
@@ -1289,65 +1707,65 @@ var M = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var oe;
-function Ie() {
-  return oe || (oe = 1, process.env.NODE_ENV !== "production" && (function() {
-    function o(p, l) {
-      return p === l && (p !== 0 || 1 / p === 1 / l) || p !== p && l !== l;
+var me;
+function We() {
+  return me || (me = 1, process.env.NODE_ENV !== "production" && (function() {
+    function o(g, p) {
+      return g === p && (g !== 0 || 1 / g === 1 / p) || g !== g && p !== p;
     }
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-    var e = I, t = de(), r = typeof Object.is == "function" ? Object.is : o, s = t.useSyncExternalStore, n = e.useRef, a = e.useEffect, c = e.useMemo, y = e.useDebugValue;
-    M.useSyncExternalStoreWithSelector = function(p, l, u, f, i) {
-      var m = n(null);
-      if (m.current === null) {
-        var h = { hasValue: !1, value: null };
-        m.current = h;
-      } else h = m.current;
-      m = c(
+    var e = R, t = $e(), r = typeof Object.is == "function" ? Object.is : o, s = t.useSyncExternalStore, n = e.useRef, a = e.useEffect, u = e.useMemo, S = e.useDebugValue;
+    z.useSyncExternalStoreWithSelector = function(g, p, f, v, y) {
+      var h = n(null);
+      if (h.current === null) {
+        var b = { hasValue: !1, value: null };
+        h.current = b;
+      } else b = h.current;
+      h = u(
         function() {
-          function v(S) {
-            if (!g) {
-              if (g = !0, _ = S, S = f(S), i !== void 0 && h.hasValue) {
-                var w = h.value;
-                if (i(w, S))
-                  return $ = w;
+          function w(c) {
+            if (!j) {
+              if (j = !0, i = c, c = v(c), y !== void 0 && b.hasValue) {
+                var m = b.value;
+                if (y(m, c))
+                  return l = m;
               }
-              return $ = S;
+              return l = c;
             }
-            if (w = $, r(_, S))
-              return w;
-            var E = f(S);
-            return i !== void 0 && i(w, E) ? (_ = S, w) : (_ = S, $ = E);
+            if (m = l, r(i, c))
+              return m;
+            var _ = v(c);
+            return y !== void 0 && y(m, _) ? (i = c, m) : (i = c, l = _);
           }
-          var g = !1, _, $, T = u === void 0 ? null : u;
+          var j = !1, i, l, d = f === void 0 ? null : f;
           return [
             function() {
-              return v(l());
+              return w(p());
             },
-            T === null ? void 0 : function() {
-              return v(T());
+            d === null ? void 0 : function() {
+              return w(d());
             }
           ];
         },
-        [l, u, f, i]
+        [p, f, v, y]
       );
-      var b = s(p, m[0], m[1]);
+      var O = s(g, h[0], h[1]);
       return a(
         function() {
-          h.hasValue = !0, h.value = b;
+          b.hasValue = !0, b.value = O;
         },
-        [b]
-      ), y(b), b;
+        [O]
+      ), S(O), O;
     }, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-  })()), M;
+  })()), z;
 }
-var ae;
-function Le() {
-  return ae || (ae = 1, process.env.NODE_ENV === "production" ? A.exports = Fe() : A.exports = Ie()), A.exports;
+var ye;
+function He() {
+  return ye || (ye = 1, process.env.NODE_ENV === "production" ? D.exports = Ge() : D.exports = We()), D.exports;
 }
-var xe = Le();
-function W(o, e) {
-  d(
+var Be = He();
+function Q(o, e) {
+  E(
     typeof e == "string",
     `The target step must be a string, was ${typeof e}`
   );
@@ -1355,26 +1773,26 @@ function W(o, e) {
     type: "disjunction",
     style: "long"
   }).format(t("array.string.untyped"));
-  d(
-    fe.test(e),
+  E(
+    we.test(e),
     `The target step must match the following format: "step{number}". Available steps are ${n}`
   );
   const a = Number.parseInt(e.replace("step", ""));
-  return d(
+  return E(
     r(a),
     `The step number "${a}" is not a valid step number. Valid step numbers include ${n}`,
     TypeError
   ), a;
 }
-function he(o) {
+function je(o) {
   function e(t) {
-    return xe.useSyncExternalStoreWithSelector(
+    return Be.useSyncExternalStoreWithSelector(
       o.subscribe,
       () => o.getSnapshot(),
       () => o.getSnapshot(),
       (r) => {
         if (typeof t == "object") {
-          const s = W(
+          const s = Q(
             r,
             t.targetStep
           );
@@ -1386,70 +1804,70 @@ function he(o) {
   }
   return e;
 }
-function Re(o, e) {
-  const t = he(o);
+function Ze(o, e) {
+  const t = je(o);
   return typeof e == "object" || typeof e == "function" ? t(e) : t();
 }
-function ie(o) {
+function ge(o) {
   return function(e) {
     return ((t) => e(o, t));
   };
 }
-function Ue(o) {
-  const e = he(o);
-  function t(c) {
-    const { targetStep: y, notFoundMessage: p, isDataGuaranteed: l } = c, u = e({
-      targetStep: y
-    }), f = p ? a({ targetStep: y }, p) : (i) => /* @__PURE__ */ q("div", { ...i, children: [
+function Qe(o) {
+  const e = je(o);
+  function t(u) {
+    const { targetStep: S, notFoundMessage: g, isDataGuaranteed: p } = u, f = e({
+      targetStep: S
+    }), v = g ? a({ targetStep: S }, g) : (y) => /* @__PURE__ */ ie("div", { ...y, children: [
       "No data found for step ",
-      String(y)
+      String(S)
     ] });
-    return l ? {
-      data: u,
-      NoCurrentData: f
-    } : B.hasData(u) ? {
-      data: u,
+    return p ? {
+      data: f,
+      NoCurrentData: v
+    } : oe.hasData(f) ? {
+      data: f,
       hasData: !0,
-      NoCurrentData: f
+      NoCurrentData: v
     } : {
       data: void 0,
       hasData: !1,
-      NoCurrentData: f
+      NoCurrentData: v
     };
   }
-  function r(c) {
-    const y = e(
-      (b) => b.stepSchema.steps.value.length
+  function r(u) {
+    const S = e(
+      (O) => O.stepSchema.steps.value.length
     ), {
-      targetStep: p,
-      maxProgressValue: l = 100,
-      totalSteps: u = y,
-      progressTextTransformer: f
-    } = c, i = W(o, p), m = i / u * l, h = f ? n(
-      { targetStep: p, maxProgressValue: l, totalSteps: u },
-      f
-    ) : (b) => /* @__PURE__ */ q("div", { ...b, children: [
+      targetStep: g,
+      maxProgressValue: p = 100,
+      totalSteps: f = S,
+      progressTextTransformer: v
+    } = u, y = Q(o, g), h = y / f * p, b = v ? n(
+      { targetStep: g, maxProgressValue: p, totalSteps: f },
+      v
+    ) : (O) => /* @__PURE__ */ ie("div", { ...O, children: [
       "Step ",
-      i,
+      y,
       "/",
-      u
+      f
     ] });
     return {
-      value: m,
-      maxProgressValue: l,
-      ProgressText: h
+      value: h,
+      maxProgressValue: p,
+      ProgressText: b
     };
   }
-  function s(c) {
-    const p = e((u) => u.storage).get(), l = !!(p && typeof p == "object" && Object.keys(p).length > 0);
-    return c ? c(l) : l;
+  function s(u) {
+    const g = e((f) => f.storage).get(), p = !!(g && typeof g == "object" && Object.keys(g).length > 0);
+    return u ? u(p) : p;
   }
-  function n(c, y) {
-    const p = o.getSnapshot().stepSchema.steps.value.length, { targetStep: l, maxProgressValue: u = 100, totalSteps: f = p } = c;
-    return ie({ targetStep: l, maxProgressValue: u, totalSteps: f })(y);
+  function n(u, S) {
+    const g = o.getSnapshot().stepSchema.steps.value.length, { targetStep: p, maxProgressValue: f = 100, totalSteps: v = g } = u;
+    return ge({ targetStep: p, maxProgressValue: f, totalSteps: v })(S);
   }
-  function a(c, y) {
-    return W(o, c.targetStep), ie(c)(y);
+  function a(u, S) {
+    return Q(o, u.targetStep), ge(u)(S);
   }
   return {
     // MultiStepFormContext: Context,
@@ -1462,12 +1880,12 @@ function Ue(o) {
   };
 }
 export {
-  Ae as MultiStepFormSchema,
-  Ce as MultiStepFormStepSchema,
-  H as StepSpecificComponent,
-  je as createDefaultValues,
-  Ue as createMultiStepFormContext,
-  Me as createMultiStepFormSchema,
-  Re as useMultiStepFormData
+  Re as MultiStepFormSchema,
+  Ue as MultiStepFormStepSchema,
+  Z as StepSpecificComponent,
+  Me as createDefaultValues,
+  Qe as createMultiStepFormContext,
+  Xe as createMultiStepFormSchema,
+  Ze as useMultiStepFormData
 };
 //# sourceMappingURL=index.mjs.map