@mittwald/flow-react-components 0.1.0-alpha.139 → 0.1.0-alpha.140

package/dist/{Action-BGsLXvb9.js → Action-C4Ncwjzf.js}

@@ -1,49 +1,49 @@
 "use client"
 /* */
-var S = Object.defineProperty;
-var B = (o, t, e) => t in o ? S(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var a = (o, t, e) => (B(o, typeof t != "symbol" ? t + "" : t, e), e);
-import A, { createContext as F, useRef as k, useContext as y } from "react";
-import { makeObservable as O, observable as M, action as I, computed as E } from "mobx";
-import { u as w } from "./useOverlayController-CGKumeGL.js";
-import D from "invariant";
-import { u as b } from "./useSelector-DpU7_HMO.js";
-import { a as T, g as N, u as R } from "./getActionGroupSlot-Do-bk4GU.js";
+var B = Object.defineProperty;
+var k = (o, t, e) => t in o ? B(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var r = (o, t, e) => (k(o, typeof t != "symbol" ? t + "" : t, e), e);
+import w, { createContext as M, useRef as O, useContext as b } from "react";
+import { makeObservable as I, observable as E, action as D, computed as T } from "mobx";
+import { u as g } from "./useOverlayController-CGKumeGL.js";
+import N from "invariant";
+import { u as v } from "./useSelector-DpU7_HMO.js";
+import { a as R, g as V, u as $ } from "./getActionGroupSlot-Do-bk4GU.js";
 import "./propsContext-DzAKlmhS.js";
-import { P as V } from "./PropsContextProvider-C6Z4XGp6.js";
+import { P as G } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
 import "remeda";
 import { d as u } from "./dynamic-ClpUSmEt.js";
-import { u as $ } from "./slotContext-DoCFkzCA.js";
-const m = F(void 0), G = m.Provider, g = (o) => new Promise((t) => setTimeout(t, o)), f = {
+import { u as L } from "./slotContext-DoCFkzCA.js";
+const C = M(void 0), U = C.Provider, x = (o) => new Promise((t) => setTimeout(t, o)), p = {
   pending: 1e3,
   succeeded: 1500,
   failed: 2e3
 };
-class C {
+class y {
   constructor() {
-    a(this, "showFeedback");
-    a(this, "state", "isIdle");
-    a(this, "setPendingTimeout");
-    a(this, "error");
-    a(this, "isAsync", !1);
-    O(this, {
-      state: M,
-      updateState: I,
-      isBusy: E
+    r(this, "showFeedback");
+    r(this, "state", "isIdle");
+    r(this, "setPendingTimeout");
+    r(this, "error");
+    r(this, "isAsync", !1);
+    I(this, {
+      state: E,
+      updateState: D,
+      isBusy: T
     });
   }
   static useNew() {
-    return k(new C()).current;
+    return O(new y()).current;
   }
   updateState(t) {
     this.state = t;
   }
   useValue() {
-    return b(() => this.state, [this]);
+    return v(() => this.state, [this]);
   }
   useIsBusy() {
-    return b(() => this.isBusy, [this]);
+    return v(() => this.isBusy, [this]);
   }
   get isBusy() {
     return this.state !== "isIdle";
@@ -51,7 +51,7 @@ class C {
   onAsyncStart() {
     this.isAsync = !0, this.updateState("isExecuting"), this.setPendingTimeout = window.setTimeout(
       () => this.startPending(),
-      f.pending
+      p.pending
     );
   }
   async onSucceeded() {
@@ -64,10 +64,10 @@ class C {
     return this.showFeedback = t, this;
   }
   async startFailedFeedback() {
-    this.updateState("isFailed"), await g(f.failed), this.resetAfterDone();
+    this.updateState("isFailed"), await x(p.failed), this.resetAfterDone();
   }
   async startSucceededFeedback() {
-    this.updateState("isSucceeded"), await g(f.succeeded), this.resetAfterDone();
+    this.updateState("isSucceeded"), await x(p.succeeded), this.resetAfterDone();
   }
   resetAfterDone() {
     this.updateState("isIdle"), this.isAsync = !1, this.error = void 0;
@@ -79,44 +79,44 @@ class C {
     this.updateState("isPending");
   }
 }
-const P = (o) => (...t) => {
+const F = (o) => (...t) => {
   const e = [...o], n = e.shift();
   if (n) {
-    const s = n(...t), i = () => e.length === 0 ? s : P(e)(...t);
-    return s instanceof Promise ? s.then(i) : i();
+    const s = n(...t), a = () => e.length === 0 ? s : F(e)(...t);
+    return s instanceof Promise ? s.then(a) : a();
   }
 }, d = () => {
-}, L = (o, t = {}) => {
+}, j = (o, t = {}) => {
   const {
     onSync: e = d,
     onAsync: n = d,
     then: s = d,
-    catch: i = d,
+    catch: a = d,
     finally: c = d
   } = t;
   try {
-    const r = o();
-    return r instanceof Promise ? (n(), r.then(s).catch(i).finally(c)) : (e(), s(r), c(), r);
-  } catch (r) {
-    e(), i(r), c();
+    const i = o();
+    return i instanceof Promise ? (n(), i.then(s).catch(a).finally(c)) : (e(), s(i), c(), i);
+  } catch (i) {
+    e(), a(i), c();
   }
-}, U = () => {
+}, q = () => {
 };
-function j(o) {
+function z(o) {
   if (o.needsConfirmation)
     return o.confirmationModalController.open;
   const t = o.getOverlayController(), {
     action: e,
     toggleOverlay: n,
     closeOverlay: s,
-    openOverlay: i
+    openOverlay: a
   } = o.actionProps;
-  return e || (i && t ? t.open : s && t || n && t ? t.close : U);
+  return e || (a && t ? t.open : s && t || n && t ? t.close : q);
 }
-class v {
+class P {
   constructor(t) {
-    a(this, "actions", []);
-    a(this, "baseAction");
+    r(this, "actions", []);
+    r(this, "baseAction");
     this.baseAction = t;
   }
   addAction(t) {
@@ -127,42 +127,42 @@ class v {
       return;
     const e = this.actions[this.actions.length - 1].actionProps.showFeedback, n = this.baseAction.state.withFeedback(
       this.baseAction.needsConfirmation ? !1 : e
-    ), s = this.actions.map((r) => j(r)), i = P(s);
+    ), s = this.actions.map((i) => z(i)), a = F(s);
     let c;
-    if (await L(() => i(...t), {
+    if (await j(() => a(...t), {
       onAsync: () => n.onAsyncStart(),
       then: () => n.onSucceeded(),
-      catch: (r) => {
-        n.onFailed(r), c = r;
+      catch: (i) => {
+        n.onFailed(i), c = i;
       }
     }), c)
       throw c;
   }
 }
-class q {
+class H {
   constructor(t) {
-    a(this, "action");
-    a(this, "execute", (...t) => {
+    r(this, "action");
+    r(this, "execute", (...t) => {
       const e = this.getBatchedActions();
       (async () => {
         for (const s of e)
           await s.executeBatch(t);
       })().catch((s) => console.error(s));
     });
-    a(this, "getBatchedActions", () => {
+    r(this, "getBatchedActions", () => {
       let t = this.action;
       const e = [];
-      let n = new v(
+      let n = new P(
         this.action
       ), s = 0;
       for (; t; ) {
-        const { action: i, break: c, skip: r } = t.actionProps;
+        const { action: a, break: c, skip: i } = t.actionProps;
         if (t.needsConfirmation) {
           n.addAction(t);
           break;
         }
-        if (r) {
-          s = r === !0 ? 1 : r, t = t.parentAction;
+        if (i) {
+          s = i === !0 ? 1 : i, t = t.parentAction;
           continue;
         }
         if (s > 0) {
@@ -171,7 +171,7 @@ class q {
         }
         if (c)
           break;
-        i || (e.push(n), n = new v(this.action)), n.addAction(t), t = t.parentAction;
+        a || (e.push(n), n = new P(this.action)), n.addAction(t), t = t.parentAction;
       }
       return e.push(n), e;
     });
@@ -180,31 +180,31 @@ class q {
 }
 class l {
   constructor(t) {
-    a(this, "state");
-    a(this, "needsConfirmation");
-    a(this, "actionProps");
-    a(this, "parentAction");
-    a(this, "confirmationModalController");
-    a(this, "overlayController");
-    a(this, "execute", (...t) => {
-      new q(this).execute(...t);
+    r(this, "state");
+    r(this, "needsConfirmation");
+    r(this, "actionProps");
+    r(this, "parentAction");
+    r(this, "confirmationModalController");
+    r(this, "overlayController");
+    r(this, "execute", (...t) => {
+      new H(this).execute(...t);
     });
     const {
       actionProps: e,
       needsConfirmation: n,
       parentAction: s,
-      overlayController: i,
+      overlayController: a,
       confirmationModalController: c,
-      state: r
+      state: i
     } = t;
-    this.actionProps = e, this.parentAction = s, this.confirmationModalController = c, this.needsConfirmation = n, this.overlayController = i, this.state = r;
+    this.actionProps = e, this.parentAction = s, this.confirmationModalController = c, this.needsConfirmation = n, this.overlayController = a, this.state = i;
   }
   static useNew(t, e = {}) {
-    const n = y(m), s = w(), i = w(), c = C.useNew();
+    const n = b(C), s = g(), a = g(), c = y.useNew();
     return new l({
       parentAction: n,
       overlayController: s,
-      confirmationModalController: i,
+      confirmationModalController: a,
       needsConfirmation: !1,
       actionProps: t,
       state: c,
@@ -212,8 +212,8 @@ class l {
     });
   }
   static use() {
-    const t = y(m);
-    return D(!!t, "Action context is not defined"), T.useRegisterState(t.state), t;
+    const t = b(C);
+    return N(!!t, "Action context is not defined"), R.useRegisterState(t.state), t;
   }
   static useConfirmationAction() {
     const t = l.use();
@@ -238,49 +238,50 @@ class l {
     return t(this.actionProps.openOverlay) ?? t(this.actionProps.closeOverlay) ?? t(this.actionProps.toggleOverlay);
   }
 }
-const z = (o) => $()[o], p = (o) => z("Modal") === "actionConfirm" ? N(o) : void 0, h = (o) => {
-  const t = l.use(), e = t.state.useValue(), n = p(o) === "primary", s = t.confirmationModalController.useIsOpen();
+const J = (o) => L()[o], A = (o) => J("Modal") === "actionConfirm" ? V(o) : void 0, f = (o) => {
+  const t = l.use(), e = t.state.useValue(), n = A(o) === "primary", s = t.confirmationModalController.useIsOpen();
   return t.needsConfirmation && s && !n ? "isIdle" : e;
-}, x = {
+}, S = {
   onPress: u((o) => {
-    const t = l.use(), e = l.useConfirmationAction(), n = p(o) === "primary";
-    return p(o) === "abort" ? t.confirmationModalController.close : n ? e.execute : t.execute;
+    const t = l.use(), e = l.useConfirmationAction(), n = A(o) === "primary";
+    return A(o) === "abort" ? t.confirmationModalController.close : n ? e.execute : t.execute;
   }),
-  isPending: u((o) => h(o) === "isPending"),
+  isPending: u((o) => f(o) === "isPending"),
   isSucceeded: u(
-    (o) => h(o) === "isSucceeded"
+    (o) => f(o) === "isSucceeded"
   ),
-  isFailed: u((o) => h(o) === "isFailed"),
+  isFailed: u((o) => f(o) === "isFailed"),
   "aria-disabled": u((o) => {
-    const t = h(o), e = R().useIsBusy();
+    const t = f(o), e = $().useIsBusy();
     return t === "isExecuting" || e;
   })
-}, st = (o) => {
-  const { children: t, ...e } = o, n = l.useNew(e), s = {
-    Button: x,
+}, rt = (o) => {
+  const { children: t, actionModel: e, ...n } = o, s = l.useNew(n), a = e ?? s, c = {
+    Button: S,
     Link: {
       onPress: u(() => l.use().execute)
     },
     Modal: {
       slot: u((i) => {
-        const { slot: c } = i, r = l.use();
-        return r.needsConfirmation = c === "actionConfirm", c;
+        const { slot: m } = i, h = l.use();
+        return h.needsConfirmation = m === "actionConfirm", m;
       }),
       isDismissable: u((i) => {
-        const r = l.use().state.useValue();
-        return r === "isExecuting" || r === "isPending" ? !1 : i.isDismissable;
+        const h = l.use().state.useValue();
+        return h === "isExecuting" || h === "isPending" ? !1 : i.isDismissable;
       }),
       controller: u(() => {
         const i = l.use();
         return i.needsConfirmation ? i.confirmationModalController : i.getOverlayController();
       }),
       ActionGroup: {
-        Button: x
+        Button: S
       }
     }
   };
-  return /* @__PURE__ */ A.createElement(G, { value: n }, /* @__PURE__ */ A.createElement(V, { props: s, mergeInParentContext: !0 }, t));
+  return /* @__PURE__ */ w.createElement(U, { value: a }, /* @__PURE__ */ w.createElement(G, { props: c, mergeInParentContext: !0 }, t));
 };
 export {
-  st as A
+  rt as A,
+  l as a
 };

package/dist/Action.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { A as t } from "./Action-BGsLXvb9.js";
+import { A as t } from "./Action-C4Ncwjzf.js";
 export {
   t as Action,
   t as default

package/dist/CopyButton.js

@@ -15,7 +15,7 @@ import "@react-aria/utils";
 import "remeda";
 import "dot-prop";
 import { f as C } from "./flowComponent-CPKCCJEg.js";
-import { A as E } from "./Action-BGsLXvb9.js";
+import { A as E } from "./Action-C4Ncwjzf.js";
 const B = {
   "de-DE": {
     "copyButton.copy": "Kopieren"

package/dist/OffCanvas.js

@@ -6,7 +6,7 @@ import { B as f } from "./Button-BPAhEOTg.js";
 import "@tabler/icons-react";
 import "./Icon-D4bkU_pz.js";
 import { I as m } from "./IconClose-FTrJdf_N.js";
-import { A as i } from "./Action-BGsLXvb9.js";
+import { A as i } from "./Action-C4Ncwjzf.js";
 import { M as p } from "./ModalOverlay-BSu4UEnW.js";
 import "./propsContext-DzAKlmhS.js";
 import { P as v } from "./PropsContextProvider-C6Z4XGp6.js";

package/dist/RadioGroup.js

@@ -4,15 +4,15 @@ import e from "react";
 import * as R from "react-aria-components";
 import E from "clsx";
 import "./propsContext-DzAKlmhS.js";
-import { P as C, m as k } from "./PropsContextProvider-C6Z4XGp6.js";
+import { P as C, m as I } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
 import "remeda";
-import { d as x } from "./dynamic-ClpUSmEt.js";
-import { F as y } from "./FieldError-D_VRyiJG.js";
-import { C as F } from "./ColumnLayout-FMONjI17.js";
-import { TunnelProvider as I, TunnelExit as m } from "@mittwald/react-tunnel";
+import { d as P } from "./dynamic-ClpUSmEt.js";
+import { F as b } from "./FieldError-D_VRyiJG.js";
+import { C as k } from "./ColumnLayout-FMONjI17.js";
+import { TunnelProvider as y, TunnelExit as m } from "@mittwald/react-tunnel";
 import { s as c } from "./FormField.module-DHK6nIcD.js";
-import { d as P } from "./deepFindOfType-6pG0fH7S.js";
+import { d as F } from "./deepFindOfType-6pG0fH7S.js";
 import { C as w } from "./ClearPropsContext-CUvsbMn8.js";
 import "@tabler/icons-react";
 import "./Icon-D4bkU_pz.js";
@@ -70,17 +70,30 @@ const T = "flow--radio-group", O = "flow--radio-group--segmented-group", $ = "fl
       tunnelId: "radios"
     }
   };
-  o === "segmented" && (p = k(p, {
+  o === "segmented" && (p = I(p, {
     Radio: {
       className: a.segment,
       unstyled: !0,
-      children: x((b) => /* @__PURE__ */ e.createElement(e.Fragment, null, b.children, /* @__PURE__ */ e.createElement(D, { className: a.checkmark })))
+      children: P((x) => /* @__PURE__ */ e.createElement(e.Fragment, null, x.children, /* @__PURE__ */ e.createElement(D, { className: a.checkmark })))
     }
   }));
-  const u = !!P(t, H);
+  const u = !!F(t, H);
   return o === "segmented" && u && console.warn(
     "<RadioButton/> is not supported in 'segmented' variant of <RadioGroup />"
-  ), /* @__PURE__ */ e.createElement(R.RadioGroup, { ...h, className: G, ref: d }, /* @__PURE__ */ e.createElement(I, null, /* @__PURE__ */ e.createElement(C, { props: p, dependencies: [o] }, t, o === "segmented" && /* @__PURE__ */ e.createElement("div", { className: a.segmentedGroup }, /* @__PURE__ */ e.createElement("div", { className: a.segments }, /* @__PURE__ */ e.createElement(m, { id: "radios" }))), o === "default" && u && /* @__PURE__ */ e.createElement(F, { s, m: l, l: i, className: a.radioGroup }, /* @__PURE__ */ e.createElement(m, { id: "radios" })), o === "default" && !u && /* @__PURE__ */ e.createElement("div", { className: a.radioGroup }, /* @__PURE__ */ e.createElement(m, { id: "radios" })), /* @__PURE__ */ e.createElement(m, { id: "fieldDescription" }), /* @__PURE__ */ e.createElement(m, { id: "fieldError" }))), /* @__PURE__ */ e.createElement(y, { className: c.fieldError }));
+  ), /* @__PURE__ */ e.createElement(R.RadioGroup, { ...h, className: G, ref: d }, /* @__PURE__ */ e.createElement(y, null, /* @__PURE__ */ e.createElement(
+    C,
+    {
+      props: p,
+      dependencies: [o],
+      mergeInParentContext: !0
+    },
+    t,
+    o === "segmented" && /* @__PURE__ */ e.createElement("div", { className: a.segmentedGroup }, /* @__PURE__ */ e.createElement("div", { className: a.segments }, /* @__PURE__ */ e.createElement(m, { id: "radios" }))),
+    o === "default" && u && /* @__PURE__ */ e.createElement(k, { s, m: l, l: i, className: a.radioGroup }, /* @__PURE__ */ e.createElement(m, { id: "radios" })),
+    o === "default" && !u && /* @__PURE__ */ e.createElement("div", { className: a.radioGroup }, /* @__PURE__ */ e.createElement(m, { id: "radios" })),
+    /* @__PURE__ */ e.createElement(m, { id: "fieldDescription" }),
+    /* @__PURE__ */ e.createElement(m, { id: "fieldError" })
+  )), /* @__PURE__ */ e.createElement(b, { className: c.fieldError }));
 }), J = "flow--radio-group--radio", K = "flow--radio-group--radio--icon", g = {
   radio: J,
   icon: K

package/dist/Section.js

@@ -14,10 +14,10 @@ const u = "flow--section", h = "flow--section--header", w = "flow--section--stat
   switch: "flow--section--switch",
   statusBadge: w
 }, A = d("Section", (o) => {
-  const { children: s, className: a, isActive: r = !0, refProp: c, ...i } = o;
+  const { children: s, className: r, isActive: a = !0, refProp: c, ...n } = o;
   if (!s)
     return null;
-  const n = m(e.section, a), l = {
+  const i = m(e.section, r), l = {
     Heading: {
       level: 2
     },
@@ -32,7 +32,7 @@ const u = "flow--section", h = "flow--section--header", w = "flow--section--stat
       }
     }
   };
-  return /* @__PURE__ */ t.createElement(f, { isActive: r }, /* @__PURE__ */ t.createElement("section", { ...i, className: n, ref: c }, /* @__PURE__ */ t.createElement(p, { props: l }, s)));
+  return /* @__PURE__ */ t.createElement(f, { isActive: a }, /* @__PURE__ */ t.createElement("section", { ...n, className: i, ref: c }, /* @__PURE__ */ t.createElement(p, { props: l, mergeInParentContext: !0 }, s)));
 });
 export {
   A as Section,

package/dist/react-hook-form.js

@@ -1,34 +1,37 @@
 "use client"
 /* */
-import r, { createContext as x, useContext as F } from "react";
-import { Controller as h } from "react-hook-form";
+import o, { createContext as F, useContext as v, useEffect as h } from "react";
+import { Controller as x, useFormState as C } from "react-hook-form";
 import "./propsContext-DzAKlmhS.js";
-import { P as v } from "./PropsContextProvider-C6Z4XGp6.js";
+import { P as k } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
 import "remeda";
 import { d as E } from "./dynamic-ClpUSmEt.js";
-import { F as P } from "./FieldError-D_VRyiJG.js";
-const d = x({}), b = d.Provider, S = () => F(d);
-function g(o) {
-  var l;
-  const { children: n, control: i, ...t } = o, p = (l = S().form) == null ? void 0 : l.control;
-  return /* @__PURE__ */ r.createElement(
-    h,
+import { F as g } from "./FieldError-D_VRyiJG.js";
+import { a as P, A as V } from "./Action-C4Ncwjzf.js";
+const b = F({}), A = b.Provider, y = () => v(b);
+function I(c) {
+  var r;
+  const { children: t, control: i, ...n } = c, a = (r = y().form) == null ? void 0 : r.control;
+  return /* @__PURE__ */ o.createElement(
+    x,
     {
-      ...t,
-      control: i ?? p,
-      render: (c) => {
-        var s;
-        const { field: u, fieldState: m } = c, e = {
-          ...u,
-          isRequired: !!((s = t.rules) != null && s.required),
-          isInvalid: m.invalid,
+      ...n,
+      control: i ?? a,
+      render: (s) => {
+        var u;
+        const {
+          field: d,
+          fieldState: { error: l, invalid: m }
+        } = s, e = {
+          ...d,
+          isRequired: !!((u = n.rules) != null && u.required),
+          isInvalid: m,
           validationBehavior: "aria",
-          children: E((f) => {
-            var a;
-            return /* @__PURE__ */ r.createElement(r.Fragment, null, f.children, /* @__PURE__ */ r.createElement(P, null, (a = m.error) == null ? void 0 : a.message));
-          })
-        }, C = {
+          children: E((p) => /* @__PURE__ */ o.createElement(o.Fragment, null, p.children, /* @__PURE__ */ o.createElement(g, null, l == null ? void 0 : l.message))),
+          ref: void 0,
+          refProp: d.ref
+        }, f = {
           Checkbox: e,
           CheckboxGroup: e,
           CheckboxButton: e,
@@ -40,25 +43,56 @@ function g(o) {
           Select: e,
           Slider: e
         };
-        return /* @__PURE__ */ r.createElement(
-          v,
+        return /* @__PURE__ */ o.createElement(
+          k,
           {
-            props: C,
-            dependencies: [c]
+            props: f,
+            dependencies: [s]
           },
-          n
+          t
         );
       }
     }
   );
 }
-const A = (o) => g;
-function I(o) {
-  const { form: n, children: i, ...t } = o;
-  return /* @__PURE__ */ r.createElement(b, { value: { form: n } }, /* @__PURE__ */ r.createElement("form", { ...t }, i));
+const O = (c) => I, D = (c) => {
+  const { isStarted: t, hasFailedWithError: i, hasSucceeded: n, children: a } = c, r = P.useNew({});
+  return h(() => {
+    n ? r.state.onSucceeded() : i ? r.state.onFailed(i) : t && r.state.onAsyncStart();
+  }, [t, i, n]), /* @__PURE__ */ o.createElement(V, { actionModel: r }, a);
+};
+function _(c) {
+  const { form: t, children: i, onSubmit: n, ...a } = c, { isValid: r, isSubmitted: s, isSubmitting: d, isSubmitSuccessful: l, errors: m } = C(t), e = t.control._formState;
+  h(() => {
+    s && r && t.reset(void 0, {
+      keepIsSubmitted: !1,
+      keepIsSubmitSuccessful: !1,
+      keepDefaultValues: !0,
+      keepValues: !0,
+      keepDirtyValues: !0,
+      keepIsValid: !0,
+      keepDirty: !0,
+      keepErrors: !0,
+      keepTouched: !0,
+      keepIsValidating: !0,
+      keepSubmitCount: !0
+    });
+  }, [s, r]);
+  const f = (S) => {
+    e.isSubmitting || e.isValidating ? S.preventDefault() : t.handleSubmit(n)(S);
+  }, u = s ? m : void 0, p = s && l;
+  return /* @__PURE__ */ o.createElement(A, { value: { form: t } }, /* @__PURE__ */ o.createElement("form", { ...a, onSubmit: f }, /* @__PURE__ */ o.createElement(
+    D,
+    {
+      isStarted: d,
+      hasFailedWithError: u,
+      hasSucceeded: p
+    },
+    i
+  )));
 }
 export {
-  g as Controller,
-  I as Form,
-  A as typedController
+  I as Field,
+  _ as Form,
+  O as typedField
 };

package/dist/types/components/Action/ActionStateContext.d.ts

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from 'react';
+
+interface Props extends PropsWithChildren {
+    isStarted?: boolean;
+    hasSucceeded?: boolean;
+    hasFailedWithError?: unknown;
+}
+export declare const ActionStateContext: FC<Props>;
+export {};

package/dist/types/components/Action/types.d.ts

@@ -1,9 +1,11 @@
 import { PropsWithChildren } from 'react';
 import { OverlayController } from '../../lib/controller';
+import { ActionModel } from './models/ActionModel';
 
 export type ActionFn = (...args: unknown[]) => unknown;
 export interface ActionProps extends PropsWithChildren {
     action?: ActionFn;
+    actionModel?: ActionModel;
     closeOverlay?: boolean | OverlayController;
     openOverlay?: boolean | OverlayController;
     toggleOverlay?: boolean | OverlayController;

package/dist/types/integrations/react-hook-form/components/{Controller/Controller.d.ts → Field/Field.d.ts}

@@ -3,6 +3,6 @@ import { ControllerProps, FieldValues, UseFormReturn } from 'react-hook-form';
 
 interface Props<T extends FieldValues> extends Omit<ControllerProps<T>, "render">, PropsWithChildren {
 }
-export declare function Controller<T extends FieldValues>(props: Props<T>): React.JSX.Element;
-export declare const typedController: <T extends FieldValues>(ignoredForm: UseFormReturn<T>) => typeof Controller<T>;
+export declare function Field<T extends FieldValues>(props: Props<T>): React.JSX.Element;
+export declare const typedField: <T extends FieldValues>(ignoredForm: UseFormReturn<T>) => typeof Field<T>;
 export {};

package/dist/types/integrations/react-hook-form/components/Field/index.d.ts

@@ -0,0 +1,4 @@
+import { Field } from './Field';
+
+export * from './Field';
+export default Field;

package/dist/types/integrations/react-hook-form/components/Field/stories/Default.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Field } from '../../..';
+
+declare const meta: Meta<typeof Field>;
+export default meta;
+type Story = StoryObj<typeof Field>;
+export declare const Default: Story;

package/dist/types/integrations/react-hook-form/components/Form/Form.d.ts

@@ -1,8 +1,10 @@
 import { ComponentProps, PropsWithChildren, default as React } from 'react';
 import { FieldValues, UseFormReturn } from 'react-hook-form';
 
-interface Props<F extends FieldValues> extends ComponentProps<"form">, PropsWithChildren {
-    form?: UseFormReturn<F>;
+export type FormOnSubmitHandler<F extends FieldValues> = Parameters<UseFormReturn<F>["handleSubmit"]>[0];
+interface Props<F extends FieldValues> extends Omit<ComponentProps<"form">, "onSubmit">, PropsWithChildren {
+    form: UseFormReturn<F>;
+    onSubmit: FormOnSubmitHandler<F>;
 }
 export declare function Form<F extends FieldValues>(props: Props<F>): React.JSX.Element;
 export {};

package/dist/types/integrations/react-hook-form/index.d.ts

@@ -1,2 +1,2 @@
-export * from './components/Controller';
+export * from './components/Field';
 export * from './components/Form';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.1.0-alpha.139",
+  "version": "0.1.0-alpha.140",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -275,7 +275,7 @@
   },
   "dependencies": {
     "@chakra-ui/live-region": "^2.1.0",
-    "@mittwald/react-tunnel": "^0.1.0-alpha.139",
+    "@mittwald/react-tunnel": "^0.1.0-alpha.140",
     "@mittwald/react-use-promise": "^2.3.13",
     "@react-aria/utils": "^3.24.1",
     "@react-types/shared": "^3.23.1",
@@ -302,7 +302,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
-    "@mittwald/flow-design-tokens": "^0.1.0-alpha.139",
+    "@mittwald/flow-design-tokens": "^0.1.0-alpha.140",
     "@mittwald/react-use-promise": "^2.3.13",
     "@nx/storybook": "^19.1.2",
     "@storybook/addon-a11y": "^8.1.5",
@@ -378,5 +378,5 @@
       "optional": true
     }
   },
-  "gitHead": "7d8145a3236ade47017539c4383897c968d801d8"
+  "gitHead": "e617717a9569b093c1f19f0923ebf6dce8157c4b"
 }

package/dist/types/integrations/react-hook-form/components/Controller/index.d.ts

@@ -1,4 +0,0 @@
-import { Controller } from './Controller';
-
-export * from './Controller';
-export default Controller;

package/dist/types/integrations/react-hook-form/components/Controller/stories/Default.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Controller } from '../../..';
-
-declare const meta: Meta<typeof Controller>;
-export default meta;
-type Story = StoryObj<typeof Controller>;
-export declare const Default: Story;